节流防抖.md

函数防抖和节流

函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调 函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(func, ms = 1000) { 
    let timer; 
    return function (...args) { 
        if (timer) { clearTimeout(timer) }
        timer = setTimeout(() => { func.apply(this, args) }, ms) }
     }
 }

函数节流

每隔一段时间，只执行一次函数。

function throttle(func, ms = 1000) { 
    let canRun = true 
    return function (...args) { 
        if (!canRun) return;
       canRun = false 
        setTimeout(() => { 
            func.apply(this, args) canRun = true 
        }, ms)
   } 
 }

异同比较

相同点：

• 都可以通过使用 setTimeout 实现。
• 目的都是，降低回调执行频率。节省计算资源。

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
• 函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

常见应用场景

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交