防抖     节流简单说明

防抖(debounce)

以上就是利用了防抖,防抖就是在一段时间内重复触发事件，延迟事件处理函数的执行,它并没有减少事件的触发,只是限制了处理函数的执行。

常见的搜索输入框都有联想功能,但它们不会在用户不断输入搜索条件过程中重复发送请求,这样会浪费不必要的性能,比较合理的是在用户停止输入的间隙发送请求,这样大大减少了请求。

函数实现

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

节流（throttle）

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

/*

* callback:回调函数

* delay:执行周期

*/functionthrottle(callback,delay){vartimer,        begin =newDate();returnfunction(){//记录事件触发时的时间varcurrent =newDate();//清除上一次定时器任务clearTimeout(timer);//判断距上一次触发是否已过了delay的时间if(current - begin >= delay){            callback();            begin = current;        }else{            timer = setTimeout(()=>{                callback();            },delay);        }    }}