什么是节流和防抖

我是一名路过的菜鸟

已于 2023-02-15 19:10:12 修改

阅读量139

点赞数

分类专栏： web 文章标签： javascript

于 2023-02-07 15:28:41 首次发布

本文链接：https://blog.csdn.net/qq_43359222/article/details/128919278

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章介绍了JavaScript中的两种性能优化技巧——节流和防抖。节流在连续触发事件时限制执行频率，例如鼠标移动、窗口尺寸变化等场景。防抖则是确保在特定时间内只执行一次函数，常用于搜索框输入延迟请求等场景。

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

节流和防抖

1.节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #CCCCCC;
        line-height: 200px;
        text-align: center;
        font-size: 30px;
    }
</style>

<body>
<script type="text/javascript">
    let div = document.querySelector("div");
    let i = 0;

    function fun() {
        this.innerHTML = ++i;
    }

    function throttle(fn, time) {
        let startTime = 0;
        return function() {
            let nowTime = +new Date();
            if (nowTime - startTime >= time) {
                fun.bind(div)();
                startTime = nowTime;
            }
        }
    }
    div.addEventListener("mousemove", throttle(fun, 1000))
</script>

2.防抖

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #CCCCCC;
        line-height: 200px;
        text-align: center;
        font-size: 30px;
    }
</style>

<body>
<div>0</div>
<script type="text/javascript">
    let div = document.querySelector("div");
    let i = 0;

    function fun() {
        this.innerHTML = ++i;
    }

    function debounce(fn, time) {
        let timer = null;
        return function() {
            if (timer) clearTimeout(timer);
            timer = setTimeout(fun.bind(div), time)
        }
    }
    div.addEventListener("mousemove", debounce(fun, 1000))
</script>

节流和防抖的使用场景是？
节流: 鼠标移动，页面尺寸发生变化，滚动条滚动等开销比较大的情况下
防抖: 搜索框输入，设定每次输入完毕n秒后发送请求，如果期间还有输入，则从新计算时间

我是一名路过的菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录