防抖|节流

最新推荐文章于 2024-04-07 11:56:57 发布

Muqiu7890

最新推荐文章于 2024-04-07 11:56:57 发布

阅读量104

点赞数

分类专栏： javascript 日常总结

本文链接：https://blog.csdn.net/qj6837/article/details/100205916

版权

日常总结同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

javascript

23 篇文章 0 订阅

订阅专栏

防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

原理：
第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。并且使用一个布尔值（ immediate）来控制第一次触发时是否立即执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖</title>
</head>
<body>
<div id="content"
     style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:greenyellow;font-size:80px;"></div>
<script>
    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = debounce(count, 1000, true)

    function debounce(func, delay, immediate) {
        let timeout = null;
        return function () {
            let context = this;
            let args = arguments;

            if (timeout) clearTimeout(timeout);
            // 是否立即执行
            if(immediate && !timeout) {
                func.apply(context, args)
            }

            timeout = setTimeout(() => {
                func.apply(context, args)
            }, delay);
        }
    }
</script>
</body>
</html>

在这里插入图片描述
防抖的应用场景:

1.每次 resize/scroll 触发统计事件
2.文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

节流(throttle): 高频事件在规定时间内只会执行一次，执行一次后，只有大于设定的执行周期后才会执行第二次。

原理：
用时间戳来判断是否已到执行时间，记录上次执行的时间戳，然后每次触发事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经达到时间差，如果是则执行，并更新上次执行的时间戳，如此循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content"
     style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:greenyellow;font-size:80px;">
</div>
<script>
    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = throttle(count, 1000)
    
     function throttle (fn, wait) {
        // 上一次执行 fn 的时间
        let previous = 0
        // 将 throttle 处理结果当作函数返回
        return function(...args) {
            // 获取当前时间，转换成时间戳，单位毫秒
            let now = +new Date()
            // 将当前时间和上一次执行函数的时间进行对比
            // 大于等待时间就把 previous 设置为当前时间并执行函数 fn
            if (now - previous > wait) {
                previous = now
                fn.apply(this, args)
            }
        }
    }
</script>

</body>
</html>

在这里插入图片描述
应用场景：
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

Muqiu7890

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖|节流

防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间原理：第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。并且使用一个布尔值（ im...
复制链接

扫一扫