手动实现JS防抖

小鹰丶

于 2020-06-24 16:29:22 发布

阅读量639

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签： JavaScript 防抖 js

本文链接：https://blog.youkuaiyun.com/jeremyjone/article/details/106946633

本文介绍了JavaScript中的防抖技术，防抖能避免函数的频繁调用，保证页面性能和数据准确性。通过一个实例展示了未使用防抖时，鼠标移动事件触发函数导致数字不断增长的问题。使用underscore库的防抖功能后，只有在鼠标静止一段时间后才会执行函数。最后，文章提供了手动实现防抖函数的简单方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址： https://www.jeremyjone.com/704/，转载请注明。

什么是防抖

事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行该函数。

防抖做什么

防止某些函数的频繁调用，保证页面的稳定流畅和数据准确性。

一个小的例子

使用 underscore 的防抖功能来测试一下效果。

中文网址

在页面中直接导入cdn即可。

https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js

未防抖时的样子

将下面内容粘贴到一个HTML的body标签中。

<div id="container" style="width:100%;height:200px;line-height:200px;text-align:center;color:#fff;background-color:#444;font-size:30px;"></div>
<script>

最低0.47元/天解锁文章

200万优质内容无限畅学