时间戳

首页 > 解决方案 > 清除间隔不起作用。问题是什么？我该如何解决？

javascript - 清除间隔不起作用。问题是什么？我该如何解决？

问题描述

https://codepen.io/fodi91/pen/ExNqGpY

首先，我每 4 秒单击一次随机背景按钮，然后单击随机背景 onclick 按钮，但间隔并没有停止。为什么？我该如何解决这个问题？

let onClick = document.getElementById('generate');
onClick.addEventListener('click', generator);



let onClick2 = document.getElementById('generate2');
onClick2.addEventListener('click', generator2);

function generator2() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);

    let background = document.getElementById('random');
    background.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
    myInterval = setInterval(generator2, 2000);
}

function generator() {

    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);

    let background = document.getElementById('random');
    background.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
    clearInterval(myInterval);
    
}

标签： javascriptclearinterval

解决方案

您的代码有几个问题。

首先，您需要在generator2()函数之外声明 myInterval 变量。

第二个问题是您的间隔函数正在调用自己创建递归循环。将设置间隔的回调与要在每个间隔上执行的代码分开。

let myInterval;
let onClick = document.getElementById('generate');
. . .

onClick2.addEventListener('click', secondClickHandler);

function secondClickHandler() {
    myInterval = setInterval(generator2, 2000);
}

function generator2() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);

    let background = document.getElementById('random');
    background.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

考虑到这一点，这就是我的处理方法：

const generate1Button = document.getElementById('generate');
const generate2Button = document.getElementById('generate2');
const randomBackground = document.getElementById('random');

let backgroundInterval;

generate1Button.addEventListener('click', () => {
    clearInterval(backgroundInterval);
    setRandomBackgroundColor();
})

generate2Button.addEventListener('click', () => {
    setRandomBackgroundColor();
    backgroundInterval = setInterval(setRandomBackgroundColor, 2000);
})

function setRandomBackgroundColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    randomBackground.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}

推荐阅读