js的防抖

最新推荐文章于 2023-04-04 09:01:14 发布

考拉菜鸟

最新推荐文章于 2023-04-04 09:01:14 发布

阅读量95

点赞数

文章标签： js抖动和防抖

本文链接：https://blog.csdn.net/chunmeizhang_88/article/details/102773711

版权

使用定时器,事件持续触发后一段时间后再执行逻辑代码,逻辑代码在setTimeout中异步执行,只有当事件停止触发,逻辑代码才会执行

<!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>js的防抖</title>
    <style>
        .box {
            width: 600px;
            height: 1000px;
            margin: 0 auto;
            border: 10px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 1.0 当触发停止一段时间后，我们才执行逻辑代码
    // 2.0 当持续触发事件时，我们不执行逻辑代码，

    // 定义一个防抖的函数
    //  time：停止的这段时间
    //  cb：要执行逻辑代码
    function fangdou(cb, time) {
        // 定义一个定时器
        let timer; // 闭包
        return function () {
            // 进入函数：清除这前的定时器
            clearTimeout(timer)
            timer = setTimeout(() => {
                // 逻辑代码
                cb()
            }, time) // 触发的时间
        }
    }

    // 给页面添加滚动事件
    // window.onscroll = function() {
    //     console.log('哎呀，我滚了：eg:发送的是网络请求')
    // }
    window.onscroll = fangdou(() => {
        console.log('我是逻辑代码')
    }, 1000)

    // 1.0 当在页面上滚动滚动条时，会触发 onscroll 很多次（12次）
    // 2.0 当第一次进入 onscroll
    //      会先清除定时器
    //      重新开启一个新的定时器，保存到全局变量 timer 中
    //          这个定时器会在 1s 后输出：我是逻辑代码
    // 3.0 当第二次进入 onscroll
    //      会先清除定时器
    //      重新开启一个新的定时器，保存到全局变量 timer 中
    //          这个定时器会在 1s 后输出：我是逻辑代码
    // 4.0  x 12
    //      会先清除定时器
    //      重新开启一个新的定时器，保存到全局变量 timer 中
    //          这个定时器会在 1s 后输出：我是逻辑代码

</script>

</html>

考拉菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的防抖

使用定时器,事件持续触发后一段时间后再执行逻辑代码,逻辑代码在setTimeout中异步执行,只有当事件停止触发,逻辑代码才会执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
复制链接

扫一扫