本文共 2015 字，大约阅读时间需要 6 分钟。

浏览器事件处理与优化

浏览器事件是一个常见的开发任务，但某些事件的触发频率非常高，可能会导致页面性能下降或对服务器造成不必要的压力。为了应对这些问题，我们可以利用函数节流和函数防抖两种方法来优化事件处理。

为什么需要节流？

许多浏览器事件，比如window.onresize、window.mousemove或window.scroll，会持续触发！滚动鼠标滚轮时，scroll事件甚至会被触发数次，这样频繁地向后台发送请求，不仅会导致页面卡顿，还会给服务器带来负担。

比如使用以下代码：

window.addEventListener("scroll", function (e) {    console.log(e);});

会发生什么？滚动一次会触发console.log多次！这显然是不合理的。

如何实现节流？

节流的方法是通过设置一个时间间隔，使得事件处理函数在一定时间内只执行一次。这样可以让频繁触发的事件按时间平均分配，减少不必要的计算量。

示例：滚动事件节流

使用throttle函数，可以让scroll事件每500ms执行一次：

import throttle from "./function/throttle.js";window.addEventListener(    "scroll",    throttle(function (e) {        console.log(e);    }, 500));

滚动页面时，console.log每隔500ms只会被执行一次。

适用场景

• 窗口调整：用resize事件时频繁触发，可以用节流。
• 页面滚动：同样适用于scroll事件。
• 元素拖拽：mousemove事件在长时间拖拽时会频繁触发。
• 点击事件：比如快速点击按钮时，会连续触发click事件。

如何实现防抖？

防抖的方法是限制事件处理函数在一定时间内只执行一次，即使事件被多次触发。这种方式特别适用于频繁交互的用户操作。

示例：输入搜索防抖

使用debounce函数，可以让keydown事件每1000ms只执行一次：

import debounce from "./function/debounce.js";let input = document.querySelector("input");input.onkeydown = debounce(function (e) {    console.log(e.keyCode);}, 1000);

如果你同时按下多个键，这次keydown事件只会派往最后一个按下的键。

适用场景

• 输入框联想：输入框每输入一个字符都会触发keyup或keydown事件，可以用防抖。
• 实时搜索：避免每输入一个字符都发送请求，可以用防抖。

节流与防抖的区别

例如，快速点击按钮会触发多次click事件，用debounce只会有一次正常响应。

完整代码示例

以下是优化后的代码示例，可以直接复制使用：

throttle.js

export default function throttle(callback, wait) {    let start = 0;    return function (e) {        if (Date.now() - start > wait) {            callback.call(this, e);            start = Date.now();        }    };}

debounce.js

export default function debounce(callback, time) {    let timeId = undefined;    return function (e) {        if (timeId !== undefined) {            clearTimeout(timeId);        }        timeId = setTimeout(() => {            callback.call(this, e);            timeId = undefined;        }, time);    };}

总结

通过合理使用节流和防抖，可以显著优化浏览器事件处理，减少不必要的计算量和对服务器的压力。选择使用throttle还是debounce，取决于你的业务需求，希望这些代码示例能为你的开发提供帮助！

转载地址：http://mqtpz.baihongyu.com/