函数的防抖

最新推荐文章于 2024-08-21 14:09:37 发布

air_cat_

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量309

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/air_cat_/article/details/135378268

版权

本文介绍了函数防抖的概念，解释了在前端开发中为何需要它，尤其是在处理如onresize、mousemove等高频触发事件时，以避免频繁操作DOM导致的性能损耗。通过实例展示了如何在JavaScript中实现防抖功能。

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

一、什么是函数防抖

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

二、为什么需要函数防抖

　　前端开发过程中，有一些事件，常见的例如，onresize、mousemove 、mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

三、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
</head>
<body>
    <input type="text"/>
</body>
</html>

<script>
    let input=document.querySelector("input");
    input.oninput=debunce(function(){
        //如果使用fn.call(this);this指向window
        console.log(this.value)
        // console.log(this)
    },500);

    function debunce(fn,delay){
        //用于存储定时器
        let t;
        return function(){
            //如果之前有定时器则清楚，这样只会执行最后一次
            if(t) clearTimeout(t)
            // console.log(this)   input
            t=setTimeout(()=>{
                //用于改变函数this的指向
                console.log(this) //input
                fn.call(this);
            },delay)
        }
    }
</script>

所以防抖主要是为了不浪费计算机资源，减少资源的消耗。