javascript防反跳技术

来源：互联网发布：ubuntu运行安卓程序编辑：程序博客网时间：2024/05/22 05:07

应用场景

在有分页的页面中不断点击下一页时，间隔不超过设定时间则响应最后一次点击
在保存文件的时候同时保存很多文件时，可以先收集信息，再一次性保存

例子

在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

0 0