javascript之节流阀

<!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>

<style>

    .box {

        height: 3000px;

    }

</style>

</head>

<body>

    <div class="box">

    </div>

    <script>

        var box = document.querySelector('.box')

        var flag = false

        document.addEventListener('scroll', function () {

            if (flag) return

            if (window.scrollY > 200) {

                console.log('我被卷上去了')

                flag = true

                setTimeout(function () {

                    alert('我是真的被卷上去了')

                    flag = false

                }, 10000)


 

            }

        })

    </script>

</body>

</html>

 节流阀是做一个限制让事件不能重复触发

案例2:

 // 设置节流阀为开门状态
        var flag = true;
        // 用来接收定时器
        var timer;
button.onclick = function () {
// clearTimeout(timer)//延时器可以写在if里面,也可以写在外面,如果写在外面,必须清理延时器,否则会创建多个延时器,导致flag很快为true,就一直输出1;如果写在里面,想要执行定时器,必须通过if语句,确保了定时器的安全。
            if (flag == true) {  
            //如果节流阀开启状态就执行if语句里面的代码
                //开始工作关闭节流阀
                flag = false
                timer = setTimeout(function () {
                    // div.style.left = 100 + 'px'
                    console.log(1);
                    flag = true//工作结束开启节流阀方便下一个工作
                }, 2000)
            }
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中的防抖和节流是为了控制函数的执行频率,以提高性能和优化用户体验。 防抖(debounce)是指在一定的时间间隔内,只执行最后一次操作。引用提供了一个自定义的防抖函数示例。该函数接受两个参数:待执行的函数和延迟时间。在函数调用时,如果在延迟时间内再次触发了函数调用,则会清除之前的定时器,重新设置一个新的定时器,以延迟函数的执行。 节流(throttle)是指在一定的时间间隔内,限制函数的执行频率。引用和提供了两个不同的节流函数示例。这些节流函数都可以指定一个时间间隔,只有在这个时间间隔内函数没有被执行过才能继续执行。其中,引用实现了一个基于定时器的节流函数,而引用则是一个基础版的节流函数,使用了时间戳来判断是否达到执行条件。 需要注意的是,防抖和节流可以根据具体的需求和场景来选择使用,以达到更好的效果。防抖适用于需要等待用户停止操作后才执行的场景,而节流适用于需要限制函数执行频率的场景。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [JavaScript 防抖和节流的实现](https://blog.csdn.net/weixin_43853746/article/details/122654312)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [【JavaScript】防抖(debounce)、节流(throttling)](https://blog.csdn.net/qq_46658751/article/details/123386755)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值