美文网首页
js实现防抖debounce和节流throttle

js实现防抖debounce和节流throttle

作者: AvenKe | 来源:发表于2020-02-17 17:40 被阅读0次

    多次触发事件,但是只在触发停止后一段时间内才触发一次,叫做 防抖; 每隔一段时间触发一次叫节流
    举例:
    在搜索框中输入,在输入停止200ms后执行搜索叫防抖;在输入过程中每隔2秒执行一次搜索叫做节流。是不是很好理解了~
    实现代码:

    // 防抖
    function debounce(fn, time){
        let timer = null;
        return function(){ 发布文章
            if(timer){
                clearTimeout(timer);
            }
            timer = setTimeout(fn, time);
        }
    }
    window.addEventListener('resize', debounce(() => {console.log('resize')}, 1000));
    
    //节流
    function throttle(fn, interval){
        let pre = new Date().valueOf();
        return function() {
            const cur = new Date().valueOf();
            if(cur - pre >= interval){
                pre = cur;
                            const args = Array.prototype.slice.call(arguments);
                fn.apply(this, args);
            }
        }
    }
    window.onresize = throttle(() => console.log('resize'), 2000);
    

    相关文章

      网友评论

          本文标题:js实现防抖debounce和节流throttle

          本文链接:https://www.haomeiwen.com/subject/xdpmfhtx.html