在前端开发中，频繁触发事件可能会导致浏览器性能下降或出现其他异常，因此需要用到 debounce 函数来控制函数调用频率。 在 JavaScript 库中，提供了一系列 debounce 函数包，其中就包括了 just-debounce-it 这个 npm 包，它可以帮我们轻松地实现 debounce 功能。
安装
首先，需要在项目中安装 npm 包 just-debounce-it，可通过以下指令来做到：
npm install just-debounce-it --save-dev
使用
基本用法
使用 just-debounce-it 的基本方式如下：
import debounce from 'just-debounce-it';
function handleScroll() {
console.log('scrolling');
}
window.addEventListener('scroll', debounce(handleScroll, 300));其中，debounce 接收两个参数：
- 需要执行的函数
- 等待时间（毫秒）
可见，在上述代码中，当我们滚动页面时，debounce 会确保 handleScroll 函数只有在用户停止滚动300毫秒之后才会调用。 如此，可以有效避免因滚动而产生的重复执行带来的性能问题。
绑定 this
由于 debounce 函数会生成新的函数，因此在使用中需要注意其 this 的指向问题。一种通用做法是使用 ES6 Arrow Function，即如下代码：
import debounce from 'just-debounce-it';
handleScroll = () => {
console.log('scrolling');
}
window.addEventListener('scroll', debounce(this.handleScroll, 300));取消即将执行的函数
just-debounce-it 提供了一个 cancel 方法来取消即将执行的函数。 用法如下：
-- -------------------- ---- ------- ------ -------- ---- ------------------- -------- -------------- - ------------------------- - ----- --------------------- - ---------------------- ----- --------------------------------- ----------------------- -- ----- -------------------------------
小结
通过本文，我们学习了如何在项目中使用 npm 包 just-debounce-it 来实现 debounce 功能，解决由于重复触发事件而导致的性能问题。 它不仅简单易用，而且功能非常强大，可以很好地提升代码的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedadacb5cbfe1ea0610ce6