当问到你JS的防抖和节流优化，你能手写吗？（二）

引言

在上一部分我们向大家分享了JS的防抖，接下来我要向大家介绍一下它的好兄弟：节流

节流

其实和防抖类似，在前端开发中，有些事件会被频繁触发，如窗口滚动、鼠标移动等。这些事件在处理时如果不进行限制可能就会对性能造成影响，因此需要采用一些技术来优化代码，减少重复的处理。节流就是一种常用的技术，它可以限制函数的执行频率，保证在一定时间内只执行一次函数。

原理

JS节流的实现原理其实与防抖类似，都是通过设置定时器来延迟函数的执行。不同之处在于，节流会在一定时间内执行多次函数，但是保证在这段时间内只执行一次。这样可以减少函数的执行次数，提高页面的性能，而防抖则是只执行一段时间只进行了一次的执行。

具体来说，JS节流的实现原理可以通过以下几步来总结：

首先，我们需要了解什么是节流。节流是指在一定时间内，只执行一次函数。与防抖不同的是，节流会在一定时间内执行多次函数，但是保证在这段时间内只执行一次。
接下来，我们需要实现一个节流函数。这个函数可以接收两个参数：要执行的函数和节流时间。在函数内部，我们需要使用一个判断来看是否可以执行函数。

js 复制代码

 function throttle(fn,delay){

      let prevTime = Date.now()

      return function(){
        
        if(Date.now() - prevTime >= delay){
          fn()
          prevTime = Date.now()  
        }  
        
      }
    }

在这个丐版的节流函数中，我们需要用到一个Date对象，他是js的一个内置对象，Date其实储存的就是创建它时的时间，包含年，月，日，星期和时分秒,我们可以通过getSeconds() 方法返回它的秒数。但是我们用这种方法只获取秒数很有可能出现过一分钟再点击，那它秒数有什么意义呢？当然一个个比对也不现实，所以我们提到了一个叫做时间戳的东西,而我们使用的就是Date对象自带的now方法，它会返回一个数字，表示自 UNIX 纪元开始（1970 年 1 月 1 日 00:00:00 (UTC)）到当前时间的毫秒数。

我们同样使用闭包保存了上一次的时间，二者相减就得到了我们想要的时间差，只要时间差大于我们的要求，我们就可以执行下一次，否则只执行第一次，所以你也可以根据这个知道我们防抖和节流的区别，一个一直触发执行了第一次和一直触发一秒一次，一个如果一直触发则不执行

同样的在实现节流函数的过程中，我们也还需要注意一些细节，但是比防抖会少一些。除去我们的Date对象## 总结

总之，JS防抖是一种比较有用的技术，我们可以使用防抖的方式在高频事件的处理中提高页面性能和用户体验。熟练掌握其实现原理和细节，对于前端开发人员来说是非常重要的，而且面试时很有可能会碰到手写一个防抖函数。是新的内容，你会眼尖地发现，这个丐版少的内容和防抖丐版简直一模一样，让我们一起来看看完整手写吧：

完整手写实现：

js 复制代码

 function throttle(fn,delay){

      let prevTime = Date.now()

      return function(){
        
        if(Date.now() - prevTime >= delay){
          fn.apply(this,arguments)
          prevTime = Date.now()  
        }         
      }
    }

如果看了上一篇文章你就很清楚它的变化了，我们保留了不定的参数传入和维持了this指针的绑定不变，如果没有看上一篇文章的话可以返回去看一看，上一篇文章有更加细致的解释。

这样，我们就实现了一个基本的JS节流函数。在实际应用中，我们可以根据具体的场景来设置节流时间，以达到最佳的性能和用户体验。

应用场景

JS节流的应用场景非常广泛，特别是在高频事件的处理中，如窗口滚动、鼠标移动、键盘输入等。下面是一个常见的应用场景：

js 复制代码

 let btn = document.getElementById('btn')

    function send(){
      console.log('已提交');
    }

    btn.addEventListener('click',throttle(send,1000))

    function throttle(fn,delay){
      let prevTime = Date.now()
    
      return function(){
        
        if(Date.now() - prevTime >= delay){
          fn.apply(this,arguments)
          prevTime = Date.now()  
        }  

      }
    }

当我们有一个按钮被人疯狂点击的时候，我们就可以1000毫秒调用一次send函数了。

总结

总之，JS节流是一种比较有用的技术，我们可以使用防抖的方式在高频事件的处理中提高页面性能和用户体验。熟练掌握其实现原理和细节，对于前端开发人员来说是非常重要的，而且面试时很有可能会碰到手写一个节流函数，当然它的出现往往是和防抖一起的，所以防抖更应该搞明白哦~

那么文章到这里就结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多后续~