qq_35749622 2021-06-24 17:28 采纳率: 100%
浏览 26
已采纳

我设置的这个函数节流lock哪里错了呀

<!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>超级链接</title>

    <style>

        div{

            width: 300px;

            margin: 20px 0;

            line-height: 30px;

            background: yellowgreen;

        }

    </style>

</head>

<body>

    <button id="start">开始</button>

    <button id="stop">停止</button>

    <div id="box"></div>

    <script>

        const startBtn = document.getElementById('start')

        const stopBtn = document.getElementById('stop')

        const box = document.getElementById('box')

        var lock = true;

        var show = {

            constent:'Hello Wold',

            timer:null,

            start:function(){

                

                if(!lock) return;

                lock = false;

                startBtn.addEventListener('click',()=>{

                    

                    timer = setInterval(() => {

                        box.innerHTML +=show.constent;

                    }, 1000);

                    

                    console.log(lock)

                })

                timer = setInterval(() => {       

                    lock = true;

                }, 1000);

                

                

            },

            stop:function(){

                stopBtn.addEventListener('click',function(){

                    clearInterval(timer)

                })

            }

        }

        show.start()

        show.stop()

    </script>

</body>

</html>

  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2021-06-24 18:04
    关注
    <!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>超级链接</title>
    <style>
        div{
            width: 300px;
            margin: 20px 0;
            line-height: 30px;
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <div id="box"></div>
    <script>
        const startBtn = document.getElementById('start')
        const stopBtn = document.getElementById('stop')
        const box = document.getElementById('box')
        var lock = true;
        var show = {
            constent:'Hello Wold',
            timer:null,
            start:function(){
                startBtn.addEventListener('click',()=>{
	                //对lock判断要放按钮click事件中，每次点击按钮时判断
                    if(!lock) return;
                    lock = false;
                    // timer 是show对象的属性，应该通过show.timer访问
                    show.timer = setInterval(() => {
                        box.innerHTML +=show.constent;
                    }, 1000);
                    console.log(lock)
                })
            },
            stop:function(){
                stopBtn.addEventListener('click',function(){
                    clearInterval(show.timer)
                    //要在点击停止按钮时才解锁
                    lock = true;
                })
            }
        }
        show.start()
        show.stop()
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 PointNet++的onnx模型只能使用一次
  • ¥20 西南科技大学数字信号处理
  • ¥15 有两个非常“自以为是”烦人的问题急期待大家解决！
  • ¥30 STM32 INMP441无法读取数据
  • ¥15 R语言绘制密度图，一个密度曲线内fill不同颜色如何实现
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧，别用大模型回答，大模型的答案没啥用
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。