javascript防反跳手艺

2024年1月2日 129次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞