公司网站的维护,淘宝客网站模块,企业画册设计模板,怎么知道网站是什么语言做的JavaScript#xff1a;节流防抖 节流什么是节流节流的实现 防抖什么是防抖防抖的实现 节流
什么是节流
在JavaScript中#xff0c;节流throttle是一种限制函数执行频率的技术。 当一个函数被频繁调用时#xff0c;节流能够控制函数执行的次数#xff0c;以避免过多的… JavaScript节流防抖 节流什么是节流节流的实现 防抖什么是防抖防抖的实现 节流
什么是节流
在JavaScript中节流throttle是一种限制函数执行频率的技术。 当一个函数被频繁调用时节流能够控制函数执行的次数以避免过多的计算和资源的浪费。
比如说在游戏中一个技能的释放是有间隔的。当我们释放了一次技能后只有过一段时间才能再次释放这个技能。这就是一种节流。
节流的实现
接下来我们就写个函数来实现节流。我会先为大家展示代码然后进行解析。
实现节流的一种常见方法是使用定时器。基本的节流函数如下所示
function throttle(func, wait) {let timer;return function() {if (!timer) {timer setTimeout(function() {func.apply(this, arguments);timer null;}, wait);}};
}该函数接受两个参数待执行的函数func和等待时间wait。
待执行的函数就是我们每隔一段时间需要调用的函数wait则是在触发一次后在wait时间内无法再次触发这个函数。
我们首先拆解一下这个函数的大题结构
function throttle(func, wait) {let timer;return function() {if (!timer) {...}};
}其基本结构为在外层函数throttle设置一个timer变量然后在内层函数使用了timer变量并把内层函数作为外层函数的返回值。 这个结构就是一个标准的闭包结构不知道闭包的可以看这篇文章[JavaScript作用域变量回收] 那么这个闭包结构有什么用呢 其保证了 timer这个变量永远不会被销毁我们在下一次访问这个函数的时候依然可以用上一次留下来的timer以确定距离上一次的事件也没有到达指定时间。 再看到内层函数
function() {if (!timer) {timer setTimeout(function() {func.apply(this, arguments);timer null;}, wait);}};timer是setTimeout的返回值当timer为空时就会执行if语句内部的代码timer setTimeout()此时timer就立刻得到了setTimeout的返回值。 然后setTimeout内部的代码要等待 wait时间后才执行。等到 wait时间后调用函数func即我们想要节流的函数。随后将 timer null;保证下一次使用这个函数可以被执行。 在这个过程中在setTimeout被调用的瞬间timer就立刻得到了setTimeout的返回值而不为空。这个时间内 if (!timer)就会判断为false从而不执行内部代码。当 wait时间后执行 timer null;此时if (!timer)就会判断为true从而进入下一次节流。 另一种常见的实现节流的方式是使用时间戳。基本的节流函数如下所示
function throttle(func, wait) {let previous 0;return function() {let now Date.now();if (now - previous wait) {func.apply(this, arguments);previous now;}};
}该函数使用一个变量previous来记录上一次函数执行的时间戳。当函数被调用时首先获取当前的时间戳然后与上一次执行的时间戳进行比较。如果两个时间戳之间的间隔大于等待时间则执行函数并更新上一次执行的时间戳。否则不执行函数。
此处也是使用了和刚才一样的闭包结构唯一的区别就是前面使用setTimeout来控制时间而此处利用时间戳的减法控制时间。
这两种实现节流的方式都可以达到限制函数执行频率的效果具体选择哪种方式取决于具体的使用场景和需求。但是两者利用的重要思想都是闭包结构保留变量。 防抖
什么是防抖
防抖事件指的是在连续触发某个事件时只有等到一定的时间间隔内没有再次触发才会执行该事件。其主要目的是防止事件的频繁触发从而减少不必要的资源消耗和提升性能。
就好比如moba游戏中的回城效果。如果你点击回城后再次点击回城那么先前的回城就会被阻断重新计时。这就是节流的思想。 防抖的实现
防抖的实现通常是通过定时器实现的。当事件触发时先清除之前的定时器再重新设置一个新的定时器在指定的时间间隔内如果没有再次触发事件则执行该事件。如果在时间间隔内再次触发了事件则重新设置定时器并重置计时。
下面是一个示例使用JavaScript实现一个简单的防抖事件
function debounce(func, delay) {let timer;return function() {clearTimeout(timer);timer setTimeout(() {func.apply(this, arguments);}, delay);};
}上述示例中使用了debounce函数来实现防抖功能。debounce函数接受一个需要执行的事件处理函数和延迟时间作为参数返回一个新的函数。当事件触发时该新函数会清除之前的定时器clearTimeout(timer);并重新设置一个新的定时器 timer setTimeout。如果在延迟时间内再次触发了事件会重置定时器。直到延迟时间内没有再次触发事件时才会执行事件处理函数。
具体使用
function handleScroll() {console.log(Scroll被触发了);
}window.addEventListener(scroll, debounce(handleScroll, 200));在上述示例中我们在window对象上监听了scroll事件并使用防抖函数将事件处理函数包裹起来。延迟时间设置为200毫秒意味着只有在200毫秒内没有再次触发scroll事件时才会执行handleScroll函数。
同样的防抖也利用了闭包思想。
通过使用防抖事件可以有效地减少事件的触发次数提升性能和用户体验。
