js——防抖和节流的区别和实现

一个拉G的前端

已于 2022-06-03 09:13:45 修改

阅读量421

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-06-02 20:38:09 首次发布

本文链接：https://blog.csdn.net/fdadfas/article/details/125106330

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.防抖
常见的滚动监听事件，每次滚动都会触发，如此太过浪费性能

思路：在第一次触发事件的时候，不是立即执行函数，而是给出一个delay时间值，例如200ms

如果在200ms内没有再次触发该事件，则执行函数

如果在200ms内有再次触发事件，则清除当前的计时器，重新开始计时器

效果：短时间内大量出发同一事件最终只会执行一次

实现：利用setTimeOut来实现计时器的功能
完整代码

<!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>
<style>
    body {
        height: 1000px;

    }

    div {
        position: fixed
    }
</style>

<body>
    <div>
        测试
    </div>
</body>
<script>
    // 防抖
    const debounce = (fn, delay) => {
        /**
        fn 需要使用防抖的函数
        delay 毫秒，防抖期限值
        */
        let timer = null
        return () => {
            if (timer) {
                // 进入此分支说明：当前正在一个计时周期中，并且再次触发了事件,取消当前计时，重新开始计时
                clearTimeout(timer)
            }
            // 进入此分支说明：当前没有计时，则开始新的计时
            timer = setTimeout(fn, delay)
            console.log(timer)
        }
    }
    const showTop = () => {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log('当前位置：' + scrollTop)
    }
    //onscroll 元素滚动时执行
    window.onscroll = debounce(showTop, 1000)
</script>

</html>

2.节流
需求：即使用户不断拖动滚动条，也可以在某个时间间隔后给出反馈？

思路：设计一种类似“青蛙”的函数，即让函数执行一次后，在某个时间段内暂时失效（冬眠），等过了这个时间段再重新激活（苏醒）

效果：短时间内大量触发同一事件，函数执行一次之后在某个指定的时间内不再执行，直到过了这个指定的时间才会重新生效

实现：状态位 / 时间戳 / setTimeout标记

<!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>
<style>
    body {
        height: 1000px;

    }

    div {
        position: fixed
    }
</style>

<body>
    <div>
        测试
    </div>
</body>
<script>
 
    //节流
    const debounce = (fn, delay) => {
        /**
         *  fn 需要使用防抖的函数
         *  delay 毫秒，防抖期限值
        */
        let start
        return () => {
            let now = Date.now()
            if (!start) {
                start = now
            }

            if (now - start >= delay) {
                //运行showTop方法 fn属于形参
                fn()
                //把start表示每次调用函数就会把now的值赋给start
                start = null
            }
        }


    }

    const showTop = () => {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log('当前位置：' + scrollTop)
    }

    //onscroll 元素滚动时执行
    window.onscroll = debounce(showTop, 1000)
</script>

</html>

3.防抖和节流的区别？
防抖：短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数————只执行一次，类似于回城

节流：短时间内多次触发，即使触发仍在继续也可以根据指定时间触发一次函数————至少执行一次，类似于冷却

一个拉G的前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js——防抖和节流的区别和实现

1.防抖常见的滚动监听事件，每次滚动都会触发，如此太过浪费性能思路：在第一次触发事件的时候，不是立即执行函数，而是给出一个delay时间值，例如200ms如果在200ms内没有再次触发该事件，则执行函数如果在200ms内有再次触发事件，则清除当前的计时器，重新开始计时器效果：短时间内大量出发同一事件最终只会执行一次实现：利用setTimeOut来实现计时器的功能完整代码```javascript ......
复制链接

扫一扫