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