防抖与节流

最新推荐文章于 2023-10-22 23:31:01 发布

大豆比小豆大

最新推荐文章于 2023-10-22 23:31:01 发布

阅读量166

点赞数

文章标签： js

本文链接：https://blog.csdn.net/XUMINGRUNDEJIE/article/details/119117740

版权

防抖

防抖：当多次触发事件时，响应代码不会立即执行，停止触发时，在一定时间后执行响应代码，且响应代码只执行一次，也就是说多次触发事件，但是响应事件只会触发最后一次，将多次操作合并为一次进行。
代码：

function debounce(time,callback){
            // 定义一个定时器变量
            var timer = null
            //返回一个函数
            return function(){
                // 清除定时器
                clearTimeout(timer)
                // 为定时器变量赋值
                timer = setTimeout(() => {
                    callback()
                },time)
            }
        }

上述代码是封装的一个防抖函数，传入两个变量，一个是定时时间，一个是回调函数，当第一次调用防抖函数时，timer为空，首先清除定时器，为定时器变量赋值，当定时时间到的时候，执行回调函数callback(),但是如果定时时间没到，第二次函数触发到达，此时会清除掉原先的定时器，重新开始计时，当定时时间到，没有第三次触发到达，就会执行回调函数。
总结：通俗一点讲就是我每一次触发这个函数调用，都会有一个定时器，如果定时器的时间还没有到，下一次触发就到了，直接清除定时器，重新开始定时，我在一定时间内多次触发，只要每次出发间隔的时间都小于定时器的计时时间，那么最终只会执行一次回调函数。防抖的目的就是将多次点击转化为一次响应，对页面进行优化。
具体代码：

<!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>
<body>
    <button id="btn">按钮</button>
    <script>
        // 函数传入两个参数，一个是时间，一个是回调函数
        function debounce(time,callback){
            // 定义一个定时器变量
            var timer = null
            //返回一个函数
            return function(){
                // 清除定时器
                clearTimeout(timer)
                // 为定时器变量赋值
                timer = setTimeout(() => {
                    callback()
                },time)
            }
        }
        var button = document.getElementById('btn')

        button.onclick = debounce(1000,function(){
            console.log('防抖')
        })
    </script>
</body>
</html>

节流

节流：在一定时间内只触发一次函数，触发很多次函数，但是在定时时间内只会执行一次。
看代码：

function throttle(delay = 100,callback){
            // 通过闭包保存一个标记，相当于一个开关
            let flag = true
            return function () {
                // 在函数开头判断标记定时器是否触发，如果有值return
                if (!flag) return
                flag = false
                setTimeout(() => {
                    callback()
                    flag = true
                }, delay)
            }
}

函数传入两个参数，一个是定时时间time，一个是回调函数callback,触发函数，会有一个开关，默认开关打开，触发函数时，判断开关是否打开，若打开则关闭开关，进行下一步，定义定时器，定时时间到，执行回调函数，否则直接返回。
代码：

function throttle(delay = 100,callback){
            // 通过闭包保存一个标记，相当于一个开关
            let flag = true
            return function () {
                // 在函数开头判断标记定时器是否触发，如果有值return
                if (!flag) return
                flag = false
                setTimeout(() => {
                    callback()
                    flag = true
                }, delay)
            }
        }
        var button = document.getElementById('btn')

        button.onclick = throttle(2000,function(){
            console.log('节流')
        })

总结：我连续点击很多次按钮，但是函数还是在每一段定时时间内执行一次，上述例子中就是每2s执行一次。

大豆比小豆大

关注

0
点赞
踩
1

收藏

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

防抖防抖：当多次触发事件时，响应代码不会立即执行，停止触发时，在一定时间后执行响应代码，且响应代码只执行一次，也就是说多次触发事件，但是响应事件只会触发最后一次，将多次操作合并为一次进行。代码：function debounce(time,callback){ // 定义一个定时器变量 var timer = null //返回一个函数 return function(){
复制链接

扫一扫