大型电商网站开发项目,手机怎么做网站免费的,网站建设应当注意,科技型中小企业认定条件目录
序言#xff1a;
防抖#xff08;debounce#xff09;
节流#xff08;throttle#xff09; 代码示例
附录#xff1a;
关于节流/防抖函数中 context#xff08;this#xff09; 的指向解析#xff1a;
防抖函数中的 this 指向
节流函数中的 this 指向 序…目录
序言
防抖debounce
节流throttle 代码示例
附录
关于节流/防抖函数中 contextthis 的指向解析
防抖函数中的 this 指向
节流函数中的 this 指向 序言
我们在平时开发的时候会有很多场景会频繁触发事件比如说搜索框实时发请求onmousemove, resize, onscroll等等有些时候我们并不能或者不想频繁触发事件咋办呢这时候就应该用到函数防抖和函数节流了
防抖debounce
防抖debounce是指在一定时间内只执行最后一次触发的事件。它适用于那些在连续触发事件的过程中只关心最后一次触发的结果的情况。
例如当用户连续输入搜索关键字时我们可以使用防抖来减少网络请求的次数。在用户停止输入一段时间后才发送网络请求进行搜索。
下面是一个简单的 JavaScript 实现防抖函数的例子
function debounce(func, delay) {let timer;return function() {clearTimeout(timer);timer setTimeout(() {func.apply(this, arguments);}, delay);};
}这个 debounce 函数接受两个参数func 是要执行的函数delay 是延迟的时间。在每次触发事件时它会清除之前设置的定时器并重新设置一个新的定时器。如果在延迟时间内再次触发事件定时器会被清除并重新设置。只有在延迟时间结束后没有再次触发事件才会执行函数。
节流throttle
节流throttle是指在一定时间内固定执行事件的频率。它适用于那些在连续触发事件的过程中需要保持一定的执行频率的情况。
例如当用户持续滚动页面时我们可以使用节流来限制处理滚动事件的频率以避免过多的计算和渲染。
下面是一个简单的 JavaScript 实现节流函数的例子
function throttle(func, delay) {let timer;return function() {if (!timer) {timer setTimeout(() {func.apply(this, arguments);timer null;}, delay);}};
}这个 throttle 函数接受两个参数func 是要执行的函数delay 是延迟的时间。在每次触发事件时它会检查是否存在定时器如果不存在则设置一个新的定时器并在延迟时间结束后执行函数。这样可以保证在延迟时间内只执行一次函数。
总结起来防抖和节流都是用于优化性能和控制事件触发频率的技术。防抖适用于只关心最后一次触发结果的情况而节流适用于需要保持一定执行频率的情况。 代码示例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylebody {height: 200vh;/* 为了触发滚动事件增加页面高度 */}/style/headbodyh1防抖和节流示例/h1script// 防抖函数function debounce(func, delay) {let timer; // 定时器变量return function() {clearTimeout(timer); // 清除之前的定时器timer setTimeout(() {func.apply(this, arguments); // 延迟时间结束后执行函数}, delay);};}// 节流函数function throttle(func, delay) {let timer; // 定时器变量return function() {if (!timer) {timer setTimeout(() {func.apply(this, arguments); // 延迟时间结束后执行函数timer null; // 清空定时器变量}, delay);}};}// 示例函数处理滚动事件function handleScroll() {console.log(处理滚动事件);}// 使用防抖函数包装处理滚动事件的函数const debouncedHandleScroll debounce(handleScroll, 200);// 使用节流函数包装处理滚动事件的函数const throttledHandleScroll throttle(handleScroll, 200);// 监听滚动事件并调用相应的处理函数window.addEventListener(scroll, debouncedHandleScroll);// 如果要使用节流函数可以将上面一行改为下面这行// window.addEventListener(scroll, throttledHandleScroll);/script/body
/html
附录
关于节流/防抖函数中 contextthis 的指向解析
在防抖和节流函数中this 的指向非常重要。下面分别解析一下
防抖函数中的 this 指向
在防抖函数中如果不加以处理this 会指向当前调用防抖函数的对象例如 window 对象。因此我们需要使用 Function.prototype.apply() 或 Function.prototype.call() 方法来明确指定 this 的值。
例如以下代码中的 handleInput 函数在执行时this 会指向 input 元素本身
input typetext oninputdebouncedHandleInput.call(this, event)这里的 this 表示当前的 input 元素。通过 call() 方法将 this 明确指定为 debouncedHandleInput 函数中的 this。
节流函数中的 this 指向
在节流函数中this 的指向与防抖函数略有不同。在节流函数中this 通常应该指向事件的目标元素例如 button 元素而不是当前调用节流函数的对象例如 window 对象。
例如以下代码中的 handleClick 函数在执行时this 会指向 button 元素本身
button onclickthrottledHandleClick(event)点击/button这里的 this 表示当前的 button 元素。在 throttledHandleClick 函数中可以使用 this 来获取目标元素的属性、修改样式等操作。
需要注意的是在使用箭头函数定义防抖和节流函数时this 的指向不会改变仍然指向外层作用域的 this。
综上所述防抖和节流函数中的 this 指向应该根据实际情况进行明确指定。
