觸發jQuery函數只有一次

我有以下代碼，其顯示在僅一次下列條件已被滿足的控制檯日誌的消息...觸發jQuery函數只有一次

視口寬度大於1250px
用戶接近頁面
用戶的底部調整大小的瀏覽器，以更廣泛地

我的代碼是這樣的......

function checkSize(){ 
     if($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) { 
     console.log('hello'); 
     } 
    } 

    checkSize(); 
    $(window).scroll(checkSize); 
    $(window).resize(checkSize);

這裏你可以看到一個演示... http://codepen.io/anon/pen/zAxHb

的問題，這是因爲你上下滾動，並調整了幾次，它觸發多次。我只希望它一次點燃，然後永遠保持。

無論如何，我可以做到這一點？

來源

2013-07-07 Adam

* 「然後始終保持」 *，這是什麼意思？因此，當條件滿足時（第一次除外），似乎不要調用該函數。如果條件改變會怎麼樣？當條件再次滿足時，你是否想再次開火？ –

對不起，是的，你是對的。一旦該功能第一次發射，我不希望它繼續發射。如果條件改變，則不應該再次發射，因爲消息已經加載。 – Adam

看來你可以簡單地undbind事件處理的條件得到滿足後：

function checkSize(){ 
    if($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) { 
    console.log('hello'); 
    $(window).off('scroll resize', checkSize); 
    } 
} 

$(window).on('scroll resize', checkSize); 
checkSize();

來源

2013-07-07 20:43:17

完美！這正是我所追求的 – Adam

此功能可以用來發射一次，並有可選的延遲。

var executeOnce = (function (fn, delay) { 
    var executed = false; 
    return function (/* args */) { 
    var args = arguments; 
    if (!executed) { 
     setTimeout(function() { 
     fn.apply(null, args); // preserve arguments 
     }, delay); 
     executed = true; 
    } 
    }; 
});

來源

2013-07-07 20:40:16 Gustav

除了菲利克斯克林的回答是：

對於頁面的未來發展，這可能是明智命名空間$（窗口）中的事件，然後禁用這些事件，所以$（窗口）滾動和調整大小事件的其他功能（如果存在）不會被禁用：

$(window).on('scroll.sizeChecker resize.sizeChecker', checkSize);

和禁用：

$(window).off('.sizeChecker');

來源

2013-07-07 20:48:09

觸發jQuery函數只有一次

回答

相關問題