页面防抖以及节流

问题描述

页面元素既绑定单击事件同时绑定双击事件,然而双击的时候还是会触发单击事件,所以要在双击的时候屏蔽单击事件。

解决办法

利用定时器延迟事件处理函数的执行,如果双击则取消单击事件处理函数的执行,仅执行双击事件
HTML

<button id="btn">点击测试button>

JS

const btn = document.querySelector("#btn"),
      timer;
btn.addEventListener('click',()=>{
    clearTimeout(timer);
    timer = setTimeout(()=>{
        clearTimeout(timer);
        cosnole.log('执行单击事件...');
    },300)
})
btn.addEventListener('dblclick',()=>{
    clearTimeout(timer);
    console.log('执行双击事件...');
})

防抖(debounce)

    以上就是利用了防抖,防抖就是在一段时间内重复触发事件，延迟事件处理函数的执行,它并没有减少事件的触发,只是限制了处理函数的执行。
    常见的搜索输入框都有联想功能,但它们不会在用户不断输入搜索条件过程中重复发送请求,这样会浪费不必要的性能,比较合理的是在用户停止输入的间隙发送请求,这样大大减少了请求。
    函数实现

/* callback:回调函数
 * delay:延迟执行间隔时间
 */
function debounce(callback,delay){
    var context = this,
        timer;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(()=>{
            //dosomething
            callback.apply(context);
        },delay)
    }
}
window.addEventListener('resize',debounce(callback,300));

节流（throttle）

     与防抖不同的是,节流是采用周期性的执行回调函数来避免频繁触发回调事件。比如在写页面滚动事件时,滚动一小段距离就有可能执行多次事件，如果事件中涉及复杂的dom操作或者计算,就会影响页面性能。

/*
 * callback:回调函数
 * delay:执行周期
 */
function throttle(callback,delay){
    var timer,
        begin = new Date();
    return function(){
        //记录事件触发时的时间
        var current = new Date();
        //清除上一次定时器任务
        clearTimeout(timer);
        //判断距上一次触发是否已过了delay的时间
        if(current - begin >= delay){
            callback();
            begin = current;
        }else{
            timer = setTimeout(()=>{
                callback();
            },delay);
        }
    }
}