怎样做某个网站有更新的提醒,h5建设网站公司,海外seo网站建设,池州网站制作公司目录 概念
代码实现
区别
应用场景 概念
当涉及到处理高频事件时#xff0c;防抖#xff08;Debounce#xff09;和节流#xff08;Throttle#xff09;成为关键的工具。它们的作用是优化函数的执行频率#xff0c;特别是在处理浏览器事件#xff08;如resize、scro…目录 概念
代码实现
区别
应用场景 概念
当涉及到处理高频事件时防抖Debounce和节流Throttle成为关键的工具。它们的作用是优化函数的执行频率特别是在处理浏览器事件如resize、scroll、keypress、mousemove等时有助于减少不必要的函数执行提高前端性能和用户体验。
节流Throttle 像是给事件加上了时间间隔。就像大厦底下的电梯定时运行以确保在每个时间段内只执行一次。比如在规定的时间间隔内比如15秒无论有多少人进入电梯都只会在规定时间到达时运行一次。
防抖Debounce 则更像是“重置”计时器。当第一个人进入电梯后等待一段时间比如15秒如果这段时间内有人再次进入计时器会重新开始直到等待时间耗尽后才会执行一次。
这两种策略都有助于控制函数的执行次数优化性能并可根据场景特性选择合适的策略。节流适用于需要在一段时间内定期执行的场景而防抖则更适用于等待最后一个事件后再执行的场景。正确使用它们能有效减少资源消耗改善用户体验特别是在大规模的前端应用中。
代码实现
以下是节流的具体代码实现
function throttled(fn, delay) {let timer nulllet starttime Date.now()return function () {let curTime Date.now() // 当前时间let remaining delay - (curTime - starttime) // 从上一次到现在还剩下多少多余时间let context thislet args argumentsclearTimeout(timer)if (remaining 0) {fn.apply(context, args)starttime Date.now()} else {timer setTimeout(fn, remaining);}}
}
这段代码是一个简单的基于时间戳的节流函数实现。它的目的是确保一个特定函数在设定的时间间隔内只执行一次。
首先它接受一个需要执行的函数和一个时间间隔作为参数。在每次函数被调用时它会记录当前时间戳并计算自上次执行以来的时间差。这段时间与设定的时间间隔进行比较
如果时间间隔已经超过了设定的延迟那么立即执行传入的函数并更新上次执行的时间戳。如果时间间隔尚未达到设定的延迟它会设置一个新的定时器在剩余的时间后再次尝试执行函数。
以下是防抖的具体代码实现
function debounce(func, wait) {let timeout;return function () {let context this; // 保存this指向let args arguments; // 拿到event对象clearTimeout(timeout)timeout setTimeout(function(){func.apply(context, args)}, wait);}
}
这个函数接收一个需要执行的函数和一个等待时间作为参数。每当这个函数被调用时它会清除之前设定的定时器并设置一个新的定时器在等待一段时间后执行传入的函数。
每次调用函数时它会获取当前的 this 上下文和传入的参数。然后清除之前设置的定时器。接着设置一个新的定时器在指定的等待时间后执行传入的函数并将之前获取的上下文和参数传递给这个函数。
防抖如果需要立即执行可加入第三个参数用于判断实现如下
function debounce(func, wait, immediate) {let timeout;return function () {let context this;let args arguments;if (timeout) clearTimeout(timeout); // timeout 不为nullif (immediate) {let callNow !timeout; // 第一次会立即执行以后只有事件执行后才会再次触发timeout setTimeout(function () {timeout null;}, wait)if (callNow) {func.apply(context, args)}}else {timeout setTimeout(function () {func.apply(context, args)}, wait);}}
}
这个函数和之前的防抖函数类似接收一个需要执行的函数、等待时间和一个布尔值 immediate 作为参数。但是它做了一些额外的处理以满足不同的需求。
首先它仍然会获取当前的 this 上下文和传入的参数。然后根据 immediate 参数的不同情况进行不同的处理如果 immediate 为 true则在第一次调用时会立即执行函数并且只有在等待时间后再次触发时才会重新计时延迟执行。如果 immediate 为 false 或未提供默认行为是等待一定时间后执行函数。
在代码中它根据 immediate 参数的值设定一个 callNow 变量用于控制第一次是否立即执行函数。如果是立即执行并且是第一次调用则会立即执行函数否则在等待时间后执行函数。
这种实现方式适用于需要在首次触发时立即执行一次函数的情况之后再根据设定的间隔进行延迟执行。这样能够更加灵活地满足不同场景下的需求比如处理搜索建议时立即展示结果然后在用户停止输入后再次触发。
区别
防抖和节流都是用于控制函数执行频率的技术但它们的核心思想和实现方式有所不同。
防抖的核心思想是确保在连续触发事件后只有在最后一次触发后的一段时间内没有再次触发时才执行函数。换句话说当函数被触发后如果在指定的时间内再次触发就会重新计时延迟执行。这可以避免在短时间内多次触发时导致函数过早执行。
节流的核心思想是确保函数在一定时间间隔内最多执行一次。它会稀释函数的执行频率无论触发频率多高函数都会按照规定的时间间隔执行一次。这可以有效减少函数的执行次数。
区别在于
触发时刻不同 防抖在最后一次触发后的一段时间内不再触发才执行函数而节流则是按照一定的时间间隔执行函数。
执行次数不同 防抖确保在延迟后执行一次而节流在规定的时间间隔内执行一次。
举例来说如果是处理输入框搜索建议防抖会在用户输入停止后延迟一段时间再触发搜索而节流则会每隔一定时间执行一次搜索无论用户输入频率如何。
应用场景
防抖的应用场景
1️⃣ 输入框搜索建议 在用户输入时防抖可以延迟执行搜索操作只有在用户停止输入一段时间后才触发实际的搜索请求减少无效请求提高搜索体验。
2️⃣ 窗口大小调整 当用户调整浏览器窗口大小时防抖可用于延迟调整页面布局或重新计算元素大小确保在用户停止调整窗口大小后才执行这些操作避免频繁执行布局或计算操作。
3️⃣ 按钮点击事件 在按钮点击时使用防抖可以避免用户多次点击造成的多次触发确保只有在最后一次点击后的一段时间内没有再次点击时才执行操作比如提交表单或打开新页面。
节流的应用场景
1️⃣ 页面滚动 当用户滚动页面时节流可以控制滚动事件的触发频率以降低滚动事件的处理次数提高页面性能。
2️⃣ 鼠标移动事件 在处理鼠标移动时节流能够稀释函数的执行保证在一定时间内只执行一次避免过多的鼠标移动事件触发函数执行。
3️⃣ 限制接口请求 在某些场景下例如用户频繁操作触发接口请求节流可用于限制请求的频率确保在一定时间间隔内只发送一次请求避免服务器压力过大或节省用户的流量消耗。
好啦本文就到这里啦
