只調用一次函數

Question

我有3個div（ #Mask #Intro #Container ），所以如果你點擊Mask，Intro會被隱藏並且容器會出現。 問題是我只想加載一次，不是每次刷新頁面或任何時候點擊菜單或鏈接等。

我怎樣才能做到這一點？

這是我現在使用的腳本：

$(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
        }
    });
});

要堅持這一點，您需要設置一個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：

$.cookie('eventsFired', null);

Answer 2

一旦被調用，只需指向一個空函數。

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

Answer 3

網頁是無狀態的 ，因為它們在頁面刷新之間不保持狀態。 當你重新加載頁面時，它不知道過去發生了什么。

餅干救援！ 您可以使用Javascript （並且jQuery有一些很好的插件使其更容易）在客戶端的瀏覽器上存儲變量。 單擊蒙版時存儲cookie，以便在下次加載頁面時它永遠不會顯示。

Answer 4

這段代碼將完美適合您，它是jquery提供的標准方法，用於綁定您只想執行一次的事件

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