JavaScript高级学习：事件的防抖和节流01——介绍事件的防抖和节流

最新推荐文章于 2024-08-25 09:57:22 发布

北凉冬

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量141

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/GAlbinus/article/details/120265535

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

提示：
本文为JavaScript栏目：JavaScript高级学习：事件的防抖和节流01——介绍事件的防抖和节流

JavaScript高级学习：事件的防抖和节流01——介绍事件的防抖和节流

防抖和节流

防抖和节流

防抖和节流严格来说属于WebAPI的性能优化。

mousemove事件举例说明遇到的问题

加入我们给某个DOM元素绑定一个mousemove事件。如下代码所示。

HTML

<style>
    #app{
        height: 200px;
        line-height: 200px;
        width: 200px;
        text-align: center;
        background-color: #00F7DE;
        margin: 500px auto;
    }
</style>
<body>
<div id="app">
    1
</div>
</body>
<script>
    let app=document.getElementById("app");

    function counteAddNum(ev) {
        app.innerHTML = parseInt(app.innerHTML)+1;
    }
    app.onmousemove=counteAddNum
</script>

效果：
在这里插入图片描述
轻微的移动都会使DOM多次触发移动事件，本事件的执行频率实在太高了。
实际上我们并不需要如此高频的事件触发，毕竟浏览器的性能是有限的，不应该浪费在这里，所以接着讨论如何优化这种场景。

防抖

首先提出第一种思路，在第一次触发事件时，不立即执行函数，而是给出一个冷却时间delay，然后：

如果在delay时间内没有再次触发滚动事件，那么就执行函数
如果在delay时间内再次触发滚动事件，那么当前的计时取消，重新开始计时

简单来说就是把事件的触发当做成一个技能。在技能释放的时候需要delay时间的蓄力，而且不能被打断，如果被打断则会重新开始蓄力。

节流

其次是第二种思路。
如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

简单来说就是给技能加一个冷却时间，事件触发后开始冷却，冷却时间内不能再触发。

北凉冬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级学习：事件的防抖和节流01——介绍事件的防抖和节流

提示：本文为JavaScript栏目：jQuery高级学习：事件的防抖和节流01——介绍事件的防抖和节流jQuery高级学习：事件的防抖和节流01——介绍事件的防抖和节流防抖和节流mousemove事件举例说明遇到的问题HTML防抖节流防抖和节流防抖和节流严格来说属于WebAPI的性能优化。mousemove事件举例说明遇到的问题加入我们给某个DOM元素绑定一个mousemove事件。如下代码所示。HTML<style> #app{ height: 2
复制链接

扫一扫

专栏目录