javascript防反跳技術

應用場景

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

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

例子

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

代碼

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