関数を一度だけ呼び出す

Question

3つのdiv（#Mask #Intro #Container）があるので、[マスク]をクリックすると、イントロが表示されなくなり、コンテナが表示されます。 問題は、私はこれをどのように行うことができます

など、私はちょうどこの一度だけではなく、私はページを更新したり、いつでも私は、メニューまたはリンクをクリックするたびにロードしたいということでしょうか？

これは私が今の使っているスクリプトです：

$(document).ready(function(){ 
    $("div#mask").click(function() { 
     $("div#intro").fadeToggle('slow'); 
     $("div#container").fadeToggle('slow'); 
     $("div#mask").css("z-index", "-99"); 
    }); 
}); 

ありがとうございました！

Answer 1

シンプルなカウンターを試すことができます。 へ

// count how many times click event is triggered 
var eventsFired = 0; 
$(document).ready(function(){ 
    $("div#mask").click(function() { 
     if (eventsFired == 0) { 
      $("div#intro").fadeToggle('slow'); 
      $("div#container").fadeToggle('slow'); 
      $("div#mask").css("z-index", "-99"); 
      eventsFired++; // <-- now equals 1, won't fire again until reload 
     } 
    }); 
}); 

あなたがset a cookieにする必要があります、これを持続。 （たとえば、そのプラグインを使用する場合は$.cookie()）。後でクッキーを削除するには

// example using $.cookie plugin 
var eventsFired = ($.cookie('eventsFired') != null) 
    ? $.cookie('eventsFired') 
    : 0; 

$(document).ready(function(){ 
    $("div#mask").click(function() { 
     if (eventsFired == 0) { 
      $("div#intro").fadeToggle('slow'); 
      $("div#container").fadeToggle('slow'); 
      $("div#mask").css("z-index", "-99"); 
      eventsFired++; // <-- now equals 1, won't fire again until reload 
      $.cookie('eventsFired', eventsFired); 
     } 
    }); 
}); 

：彼らはページの更新間の状態を保持していないという点で

$.cookie('eventsFired', null); 

Answer 2

Webページがステートレスです。ページをリロードすると、過去に何が起こったのか分かりません。

レスキュークッキー！変数をクライアントのブラウザに格納するには、use Javascript（およびそれを簡単にするためにjQuery has some nice plugins）にすることができます。マスクがクリックされたときにクッキーを保存すると、ページが次にロードされたときに表示されないようになります。

Answer 3

と、このコードは、あなたのための完璧な仕事だろうと、それはあなたがそれが呼ばれた後、空の関数に一度だけ

$(document).ready(function(){ 
     $("div#mask").one('click', function() { 
      $("div#intro").fadeToggle('slow'); 
      $("div#container").fadeToggle('slow'); 
      $("div#mask").css("z-index", "-99"); 
     }); 
    }); 

Answer 4

だけでポイントを実行するイベントをバインドするためにjqueryのが提供する標準的な方法です。

var myFunc = function(){ 
    myFunc = function(){}; // kill it 
    console.log('Done once!'); // your stuff here 
};