JS——节流和防抖

一、节流（throttle）

1、定义：是指事件在n秒内只触发一次。

2、使用场景：scroll事件，每隔n秒触发一次事件

3、作用：控制事件触发的频率。

4、代码实现：利用闭包和定时器；闭包保存变量来控制定时器里的事件何时触发；

 react写法
 // 节流方法
 const throttle = (() => {
   let flag = true; // 关键在于flag控制定时器的执行
   return (time) => {
     if (flag) {
       setTimeout(() => {
         console.log(time);
         flag = true;
       }, time);
       flag = false;
     }
   };
 })();
 // 组件
 const App = () => {
     // 业务代码
     const fn = () => {
       console.log(1)
     }
     return <Input onChange={() => {debounce(500)}} />
 }
 export default App    

二、防抖（debounce）

1、定义：是指事件触发后n秒内只触发一次，但连续触发则重新计时。

2、使用场景：

• 如输入事件，定义用户输完后500ms未操作则视为输入完成，然后再触发事件。
• 点击按钮提交请求，加入防抖，防止用户点击过快提交多次请求

3、作用：以免把一次事件误认为多次

4、代码实现：利用闭包和定时器；闭包保存定时器，n秒内触发则重置定时器

react写法
   // 防抖方法
    const debounce =(() => {
        let timer = null;
        return (fn,time) => {
        if (timer) clearTimeout(timer) // 关键在于重置timer，也就是实现重新计时
            timer = setTimeout(() => {
                fn()
            }
        ,time) 
        }
    })()
    // 组件
    const App = () => {
        // 业务代码
        const fn = () => {
          console.log(1)
        }
        return <Input onChange={() => {debounce(500)}} />
    }
    export default App