javascript防反跳技术

2019年8月28日 94次阅读 来源: 15875116510

应用场景

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

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

例子

  • 在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

    原文作者：15875116510
    原文地址: https://segmentfault.com/a/1190000000650911
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞