前端的防抖和节流，及使用场景。

最新推荐文章于 2024-09-22 20:39:15 发布

浅浅一笑^*^

最新推荐文章于 2024-09-22 20:39:15 发布

阅读量1.3k

点赞数 2

分类专栏：防抖和节流定时器文章标签： javascript css3

本文链接：https://blog.csdn.net/weixin_46409887/article/details/105827617

版权

定时器同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

防抖和节流

2 篇文章 0 订阅

订阅专栏

1,什么是防抖和节流
短时间内大量的触发某函数导致的性能的问题

防抖debounce：在事件触发n秒后再执行，如果在n秒内又有新的触发，就重新计算
例如：一直输入就不发送，等2秒内不再输入了就发送，如果再次输入了，2秒时间从新计算

节流throttle：连续事件触发，在指定的时间内，不管触发几次，就只执行一次
例如：在指定的时间内多次触发无效

有防抖和节流的插件：lodash

2.使用场景:
防抖:实时搜索(keyup) 、拖拽(mousemove)、
节流:窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、

3.详细介绍一下:
在前端开发中一部分的用户行为会频繁的触发事件执行,对DOM的操作
资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器崩溃
函数（防抖和节流）就是为了解决类似的需要应运而生的。

简单的代码运用:

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

<body>
    搜索<input type="text" id="myinput" />
    <button id="mybtn">提交</button>
</body>

</html>
<script>
    function search() {
        console.log('去请求接口');//先请求接口数据
    }
    //防抖
    function debounce(fn, time) {
        let timer = null;
        return function () {
            //执行之前，先判断是否有定时器，有就先清除，保证只有一个定时器
            if (timer) {
                clearTimeout(timer);//清除定时器
            }
            //在用户输入时，如果停顿了2s，就去调数据
            timer = setTimeout(() => {
                fn();//触发事件
                timer = null;//定时器的使用（自定义规范）
            }, time);//触发时间（2s或.....）
        }
    }
    function btn() {
        console.log('去提交');//提交数据
    }
    //节流
    function throttle(fn, time) {//连续触发事件  规定的时间
        let flag = false;
        return function () {
            //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发
            if (!flag) {//不为假时 执行以下
                fn();//触发事件
                flag = true;//为真
                setTimeout(() => {//超时调用（在规定的时间内只执行一次）
                    flag = false;
                }, time);
            }
        }
    }
    myinput.onkeyup = debounce(search, 2000);//键盘弹起触发 防抖(search,2s时间)
    mybtn.onclick = throttle(btn, 3000);//单击事件   节流(btn,3s时间)
</script>