在日常开发过程中，频繁调用回调函数进行滚动事件的复杂计算，很可能导致页面堵塞。此时，我们更喜欢将多个计算合并为一次，只操作一个精确点。JS调用这个方法去抖和节流

功能防抖

当事件连续触发时，如果事件在一定时间内没有再次触发，事件处理功能只会执行一次。如果事件在设定时间到来之前再次触发，延迟将重新开始。也就是说，当用户一直触发该功能，并且每次触发该功能的间隔小于给定时间时，在防抖的情况下只会执行一次。

函数去抖(fn，wait){ var time out=null；//定义定时器返回函数(){if(timeout！==null) clearTimeout(超时)；//清除此定时器超时=setTimeout(fn，wait)；}}//handle函数handle(){ console . log(math . random())；}//scroll事件window . addeventlistener(' scroll '，去抖(handle，1000))；

如上所述，当滚动功能被连续触发时，手柄功能将在1秒内只执行一次，并且在滚动过程中不会被连续执行，这有效地降低了性能损失

功能节流

当事件连续触发时，保证在一定时间内只调用一次事件处理函数，也就是说，假设用户一直在触发这个函数，并且每次触发都小于设定值，那么每隔一次就会调用函数throttling

用一句话概括防抖和节流的区别：防抖是把多次执行变成最后一次执行，节流是把多次执行变成定期执行，实现功能节流。我们主要有两种方法：时间戳和计时器

例如

var节流=函数(func，delay){ var prev=date . now()；return function(){ var context=this；//这指向window var args=参数；var now=date . now()；if(now-prev=delay){ func . apply(context，args)；prev=date . now()；} } }函数句柄(){ console . log(Math . random())；} window . addeventlistener(' scroll '，throttle(handle，1000))；这个节流函数使用时间戳使第一个滚动事件执行回调函数一次，然后每1000毫秒执行一次，滚动不超过1000毫秒。再举一个计时器的例子：

var throttle=func(func，delay){ var timer=null；return function(){ var context=this；var args=参数；if(！timer){ timer=setTimeout(function(){ func . apply(context，args)；timer=null}，延迟)；} } }函数句柄(){ console . log(Math . random())；} window . addeventlistener(' scroll '，throttle(handle，1000))；当事件被触发时，我们设置一个定时器，在1000ms之前为空，当指定时间到来时，执行该功能，再次清除定时器。也就是说，第一次触发事件时，在指定的时间后会执行该功能，执行后会立即清除定时器，开始新的循环，那么我们可以看到滚动后不会立即打印出来，而是等待1000ms打印出来的效果，有延迟效果，滚动事件在这段时间内不会执行该功能。单独使用时间戳或计时器有缺陷。我们更喜欢在第一个触发器之后立即执行该函数，并且在最后一个触发器之后执行一次事件处理函数。

var throttle=func(func，delay){ var timer=null；var startTime=date . now()；//设置start time return function(){ var curit me=date . now()；var剩余=延迟-(Curtime-startTiME)；//剩余时间var上下文=thisvar args=参数；clearTimeout(计时器)；If(剩余=0) {//第一个触发器立即执行func.apply(context，args)；start time=date . now()；} else { timer=setTimeout(func，剩余)；//取消当前计数器并计算新剩余的} } } function handle(){ console . log(math . random())；} window . addeventlistener(' scroll '，throttle(handle，1000))；

StartTime starttime、当前时间curTime和剩余时间用于节流功能。剩余时间小于等于0时，表示执行处理函数，保证函数第一次可以立即执行，每延迟一次可以执行一次；如果时间还没到，剩余后会触发，保证最后触发的事件也能执行功能。如果在剩余时间内再次触发滚动事件，当前计数器将被取消，并将计算新的剩余时间。通过时间戳和定时器的方法，实现了第一次立即执行、最后一次执行、指定时间间隔的效果，在开发中可以灵活使用

PS:防抖和节流可以有效降低浏览器引擎的损耗，防止页面的阻塞和堵塞，要熟练掌握。最后再次感谢原作者的总结，热情分享技术让我们的生活更美好

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。