实现防抖的步骤

最新推荐文章于 2024-09-22 11:17:00 发布

CV__工程师

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量376

点赞数 8

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/w_s_n_d1/article/details/136380896

版权

本文介绍了JavaScript中的防抖概念，即在一段时间内仅执行一次函数，避免频繁触发导致的性能浪费。通过设置定时器和清除机制来确保函数在适当延迟后执行。实例演示了如何使用防抖函数处理按钮点击事件。

摘要由CSDN通过智能技术生成

防抖的概念是在一定时间内只执行一次函数，如果在这段时间内再次触发，则重新计时。这样可以在频繁触发事件时，减少多余的执行，提升性能。

实现防抖的步骤：

设置一个定时器变量
每次触发事件时，清除旧的定时器
设置新的定时器，在一定延迟后执行函数

<button onclick="btn()">
    点击
</button>

<script>
    //防抖函数
    function debounce (func,wait) {
        let timeout;
        return function() {
            const context = this;
            const args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(() =>{
                func.apply(context,args);
            },wait)
        }
    }
    function handleBtn() {
        console.log(123456);
    }
    const btn = debounce(handleBtn, 300);
</script>