js中的函数节流

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

函数的节流

函数的节流其实和函数的防抖作用差不多，都是为了减少不必要的操作，但函数节流和函数防抖的不同点在于函数的防抖是在一个时间段内如果只触发了一次事件，那么就执行，如果在一个时间段内触发了多次事件，那么就从新开始计时，知道时间段内只触发一次事件。函数节流是在固定的时间段内执行一次事件，不管在这个时间段内触发了几次事件都只执行一次。

函数节流的应用

函数的节流一般用在滚动条相关的事件和鼠标点击事件上

函数节流的使用方法

    //本文主要提供在vue中的写法，首先是直接写在methods中的写法
    throttleTest: (function () {
      let timer = null
      return function () {
          if (timer) { //如果定时器已经存在，那么就直接结束
            return
          }
          timer = setTimeout(() => {
            console.log(111) //这里就是你要节流的操作，这里用打印来代替
            timer = null //这里置空是因为执行到这里说明上一次的执行操作已经结束，就可以开始下一个定时器了
          }, 1000)
      }
    })(),//这里要使用自运行函数，因为throttelText返回的是一个函数

上面的写法是直接把所有内容写在methods中，不便于复用和管理，下面说一下直接把节流操作写在js中，使用的时候只要引入就可以了的写法

 //throttle.js
 export function throttle (func, delay = 300) {
      let timer = null
      return function () {
          if (timer) {
            return
          }
          timer = setTimeout(() => {
            func.apply(this, arguments)
            timer = null
          }, 1000)
      }
}

//使用的时候首先引入throttle.js再调用就可以了
import { throttle } from '@/utils/throttle'

 throttleTest: throttle(function (value) { 
 console.log(111)   //在这里写你需要的操作就行了
 }, 1000),

注意：从上面可以看到我在写节流的时候用到了闭包，这里使用闭包的原因是利用闭包的特性，不会污染全局作用域，假设现在一个页面有好几个操作需要使用到节流操作，如果你不使用闭包的话就要声明好几个不同的变量来使用才能满足需求，现在使用闭包的话一个就搞定了

总结

函数节流和函数防抖都是一种优化策略，在面试和日常的开发中都挺常用到的，需要认真掌握，gogogo