函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
如何封装防抖函数
function debounce(fn,delay){
var timeout = null;
return function(){
if(timeout){
clearTimeout(timeout);
}
timeout = setTimeout(fn,delay)
}
}
function handle(){
console.log(Math.random())
}
window.addEventListener('mousemove',debounce(handle,1000))
如何封装节流函数
方法一 通过date设定
function throttle(fn,delay){
let timer,start=0;
return function(){
let now = new Date().getTime();
if(now > start + delay){
fn();
start = now;
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
方法二 定时器方案
function throttle(fn,delay){
let timer = null;
return function(){
if(!timer){
timer = setTimeout(function(){
fn();
timer = null;
},delay)
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
节流函数的使用场景
- 懒加载、滚动加载、加载更多或监听滚动条位置；
- 百度搜索框，搜索联想功能；
- 防止高频点击提交，防止表单重复提交；
