请老师看下对不对？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Document</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 show = {
            content: "Hello World",
            timer: null,
            start: function () {
                startBtn.onclick = () => {
                    timer= setInterval(() => {
                        console.log(this.timer++);
                        box.innerHTML += this.content;
                    }, 1000);
                    // clearInterval(this.timer)
                }
            },
            stop: function () {
                stopBtn.onclick = () => {
                    clearInterval(timer)
                }
            },
        }
        show.start();
        show.stop();
    </script>
</body>

</html>

老师你好，多次点击后会加速，注释部分点击开始先清除定时器不知道放哪里，都试了没效果。

慕仙7313728 2022-07-04

源自：模板字符串与箭头函数 3-13 编程练习

收起

2回答

好帮手慕久久 2022-07-05 09:52:49

同学你好，解答如下：

1、如下代码中的timer，并不是同一个timer，所以无法清除定时器：

2、如下写法是可以的：

这样写就可以了。

3、如果想实现同学的需求，可以参考如下思路：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Document</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 show = {
            content: "Hello World",
            timer: null,
            lock: true,   //设置一个锁
            start: function () {
                startBtn.addEventListener("click", () => {
                    // 如果关锁了，就不再往下执行--》即 不再开启新的定时器
                    if(!this.lock) return

                    // 初始时，锁没关，则会开启一个定时器
                    this.timer = setInterval(() => {
                        box.innerHTML += (this.content + " ")
                    }, 1000)

                    // 定时器一旦开启，就关锁--》以后再连续点击，也不重新生成定时器
                    this.lock = false
                }, false)
            },
            stop: function () {
               
                stopBtn.addEventListener("click", () => {
                    // 清空定时器
                    clearInterval(this.timer)
                    // 把锁打开
                    this.lock = true;
                }, false)
            },
        }
        // 在此补充代码
        show.start()
        show.stop()
    </script>
</body>
 
</html>

祝学习愉快！

收起回答

提问者慕仙7313728 #1

老师你好，根据轮播图节流的机制，直接把锁用定时器放点开始按钮中也可以对吧。这和放在暂停按钮中有什么区别吗？哪个好一点？

 const startBtn = document.getElementById('start')
        const stopBtn = document.getElementById('stop')
        const box = document.getElementById('box')
        var show = {
            content: "Hello World",
            timer: null,
            lock:true,
            start: function () {
                // timer=this.timer;//清除定时器的问题。
                startBtn.onclick = () => {
                    if(!this.lock) return;
                    clearInterval(this.timer);
                    this.timer= setInterval(() => {
                        box.innerHTML += this.content;
                    }, 500);
                    this.lock=false;
                    setTimeout(()=>{
                        this.lock=true;
                    },1000)
                }
            },
            stop: function () {
                stopBtn.onclick = () => {
                    clearInterval(this.timer)
                }
            },
        }
        show.start();
        show.stop();

2022-07-05 10:07:01

好帮手慕久久回复提问者慕仙7313728 #2

这样写，并没有完全实现同学的需求。点击开始按钮后，1s后锁自动就开了，如果此时我再点击开始按钮，那么定时器会清空，重新计时，此时打印还是会中断一次：
老师提供的demo，点击开始按钮会开启一个定时器，该定时器会一直执行。该定时器执行期间，不轮怎么点击开始按钮，都不会影响这个定时器，输出会是持续的。点击结束按钮后，才会关闭。这样更符合同学的需求。

2022-07-05 10:38:44
提问者慕仙7313728 回复好帮手慕久久 #3

好的，谢谢老师

2022-07-05 10:41:56

慕仙7313728 提问者 2022-07-04 22:26:57

start: function () {
                timer=this.timer;//指向this
                startBtn.onclick = () => {
                    clearInterval(timer);//这里清除定时器的问题。
                    timer= setInterval(() => {
                        box.innerHTML += this.content;
                    }, 500);
                }
            },

你好老师，请看下放这里对不对？？

效果不是我想要的那种，点击后应该还是会页面输出，但不会加速输出。我现在加在这里连续点击它页面不会输出了。

收起回答