大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > js多次事件被触发只执行一次

js多次事件被触发只执行一次

关键词:js多次事件被触发执行一次  阅读(6803) 赞(30)

[摘要]有时候我们需要实现往下滚动加载内容的功能,这时候我们需要监测scroll事件,此时我们需要用到js多次scroll事件被触发却只执行一次,即只加载一次内容。我们可以借用一个函数来实现此功能。

代码如下:


var debounce = function (func, threshold, execAsap) {
    var timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
            func.apply(obj, args);
            timeout = null;
        };
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100);
    };
}

// 代码说明:

debounce 接受 3 个参数,后两个可选;第一个是要 debounce 的函数, 第二个代表 debouce 的时间间隔,第三个在时间段的开始还是结束执行函数;

debounce 返回包装好的函数,该函数两次执行间隔至少是 threshold,并且小于 threshold 间隔的调用会重新开始计时( 两次调用的时间间隔);

把 clearTimeout( timeout ) 换为 timer = null; 返回函数两次执行间隔至少是 threshold,并且小于 threshold 间隔的调用会重新开始计时( 两次调用的时间间隔);

// 解决 onresize 多次调用

window.onresize = debounce( function(){

    alert( 'hello world');

}, 100, true)

// 在自动补齐中为了减少请求服务器次数也会用到 debounce, 只有连续敲键间隔大于某个值才会发送 ajax



相关评论