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

最新推荐文章于 2024-10-17 11:45:42 发布

原创最新推荐文章于 2024-10-17 11:45:42 发布 · 203 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了JavaScript中事件防抖和节流的原理，通过mousemove事件实例演示问题，并提供了解决方案，包括防抖技巧的技能蓄力比喻和节流的冷却时间概念。

提示：
本文为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>