By 无表情

Updated:

Contents

应用场景

  • 在有分页的页面中不断点击下一页时，间隔不超过设定时间则响应最后一次点击

  • 在保存文件的时候同时保存很多文件时，可以先收集信息，再一次性保存

例子

  • 在qq秀所有服装页面中的分页设计中
  • 在grunt的插件watch保存文件的时候

代码

1
2
3
4
5
6
7
8
9
10
11
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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
   //以下可以直接拷贝到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

Contents