防抖与节流

防抖
触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
应用场景：用户输入手机号邮箱检测onchange oninput等事件，窗口大小Resize，只需等窗口改变完执行

点击查看代码

const debounce = (fn, wait, immediate) => {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        if (immediate && !timer) {
          fn.call(this, args);
        }
        timer = setTimeout(() => {
          fn.call(this, args);
        }, wait);
      };
    };
const betterFn = debounce(() => console.log("fn 防抖执行了"), 1000, true);
document.addEventListener("scroll", betterFn);

节流

节流就是指连续触发事件但是在N秒中只执行一次函数。
应用：

• 百度搜索框，搜索联想功能-；
• 防止高频点击提交，防止表单重复提交；

点击查看代码

function throttle(fn,wait){
    let pre = 0;
    return function(...args){
        let now = Date.now();
        if( now - pre >= wait){
            fn.apply(this,args);
            pre = now;
        }
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000))