javascript防反跳技術

應用場景javascript

  • 在有分頁的頁面中不斷點擊下一頁時,間隔不超過設定時間則響應最後一次點擊java

  • 在保存文件的時候同時保存不少文件時,能夠先收集信息,再一次性保存chrome

例子函數

  • qq秀全部服裝頁面中的分頁設計中
  • 在grunt的插件watch保存文件的時候

代碼grunt

var timeoutId = null; 
    var n = 0;
    var counter = 0;
    //button爲頁面上的按鈕,快速不間斷點擊button,click時間的處理函數會調用屢次,可是業務邏輯只會調用一次
    $('#button').click(function () {
        clearTimeout(timeoutId);
        console.log('n: ', ++n);
        timeoutId = setTimeout(function () {
            console.log('counter: ', ++counter);
        }, 200);
    });
//如下能夠直接拷貝到chrome的控制檯執行
    var timeoutId = null; 
    var n = 0;
    var counter = 0;
    //n = 10; counter = 1;
    for (var i = 0; i < 10; i++) {
        (function () {
            clearTimeout(timeoutId);
            console.log('n: ', ++n);
            timeoutId = setTimeout(function () {
                console.log('counter: ', ++counter);
            }, 200);
        })();
    }

underscore庫裏面集成了一個實現防反跳的方法:debounce插件

相關文章
相關標籤/搜索