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 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line