JavaScript 节流，防抖函数

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

// 防抖
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

主要的思路就是通过定时器，这里我们模拟的是滚动事件，另外还有很多情况比如点击、焦点，鼠标移动等等。。

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

function throttle(func, wait) {
let previous = 0;
return function() {
   let now = +new Date();
   let context = this;
   if (now - previous >= wait) {
       func.apply(context, arguments);
            previous = now; // 执行后更新 previous 值
        }
    }
}

主要的思路就是通过提前定义一个变量来储存时间，在执行完成后去更新这个时间值来确保这段时间内不会执行第二次

那我们对比一下两者的区别在于，当事件持续被触发，如果触发时间间隔短于规定的等待时间（n秒），那么在不同的情况下：

• 函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果
• 函数节流的情况下，函数将每个 n 秒执行一次

---

如有错误，请指正！