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

最新推荐文章于 2024-04-28 13:22:20 发布

浅浅一笑^*^

最新推荐文章于 2024-04-28 13:22:20 发布

阅读量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>

浅浅一笑^*^

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端的防抖和节流，及使用场景。

1,什么是防抖和节流短时间内大量的触发某函数导致的性能的问题防抖debounce：在事件触发n秒后再执行，如果在n秒内又有新的触发，就重新计算例如：一直输入就不发送，等2秒内不再输入了就发送，如果再次输入了，2秒时间从新计算节流throttle：连续事件触发，在指定的时间内，不管触发几次，就只执行一次例如：在指定的时间内多次触发无效有防抖和节流的插件：lodash2.使用场景:防抖...
复制链接

扫一扫