节流和防抖简单介绍

背景

因为在开发过程中经常会用到节流和防抖，比如input的输入，滚动条监听等等，而且对节流和防抖的概念很模糊，所以在这里简单的写了一下这两个函数便于理解

防抖

就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖在input输入时最常用

/** 防抖函数 */
const debounce = (fn: (...args), timeout) => {
  let timer
  return (...args) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {fn(...args)}, timeout);
  }
}

节流

就是指连续触发事件但是在 n 秒中只执行一次函数。简单说就是会使函数执行的频率不那么频繁

防抖函数的方法有两种

方法一：时间戳

const throttle=(func, wait)=> {
    let previous = 0;
    return ()=> {
        let now = Date.now();if (now - previous > wait) {
            func();
 　　　　　　previous = now;
 } } }

方法二：定时器

const throttle=(func, wait)=> {
    let timeout;
    return ()=> {
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func()
            }, wait)
        }

    }
}