防抖和节流

最新推荐文章于 2023-04-30 15:34:46 发布

热情仔

最新推荐文章于 2023-04-30 15:34:46 发布

阅读量280

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq1248409755/article/details/115479750

版权

js 专栏收录该内容

19 篇文章

订阅专栏

先解释下什么是防抖和节流，我个人的理解
1.防抖（debounce）：不管你点击多少次，只执行最后一次
2.节流（throttling）：不管你点击多少次，在一定时间内一定执行一次
我写了个例子大家可以试试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="dianjifd">防抖</button>
    <div id="fangdou">防抖点击：0次</div>
    <button id="dianjijl">节流</button>
    <div id="jieliu">节流点击：0次</div>
    <script>
        function debounce(fn, delay) {//防抖只执行最后点击的一次，用setTimeOut做缓存
            var timer = null;
            return function (...args) {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn(...args);
                }, delay)
            }
        }
        function throttling(fn, delay){//节流  在规定时间执行一次
            var flag = false;
            return function(...args){
                if(flag){
                    return false
                }
                flag = true;
                setTimeout(()=>{
                    fn(...args);
                    flag = false;
                },delay)
            }
        }
        window.onload = function () {
            var debounceCount = 0;
            document.getElementById("dianjifd").onclick = debounce(dianjifd, 500);
            function dianjifd() {
                document.getElementById("fangdou").innerHTML = "防抖点击：" + (++debounceCount) + "次"
            }
            var throttlingCount = 0;
            document.getElementById("dianjijl").onclick = throttling(dianjijl, 500);
            function dianjijl() {
                document.getElementById("jieliu").innerHTML = "节流点击：" + (++debounceCount) + "次"
            }
        }
    </script>
</body>

</html>

可以直接复制在自己的html中然后进行实验下大家就可以理解什么是防抖和节流了，两者区别还是很大的，这也算是前端优化的一种方式。
这两者应用的场景也是不同的，大家有时候搜索的时候输入搜索框下面出现提示，发没发现你要是打的太快他不会迅速给你提示而是等你停下来然后在给你搜索历史或者是一些提示，这个地方就可以用到防抖，比如监听页面尺寸大小发生变化时候也可以进行防抖操作
比如滚动条滚动事件可以用节流事件。