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

Question

首先我点击随机背景每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);
    
}

Answer 1

你有两个问题：

您将 myInterval 当作全局变量来使用，但它并未在函数之外的任何地方定义
你正在递归调用 generator2，generator2 设置颜色，然后设置一个间隔来调用 generator2，不管是否有另一个间隔，所以随着每个间隔过去你实际上设置了另一个间隔，你最终会挂起标签这个。更不用说，myInterval 将有一个不同的间隔 ID，这意味着即使你停止它，你也只停止了最后一个运行间隔。一个可能的解决方案是将颜色更改设置为不同的函数，并在间隔内而不是在单击时调用它。

Answer 2

这里的问题是您通过在间隔本身中调用 generator2 函数来定义多个间隔。因此，您应该使用 setTimeout。这将导致定义的每个 timeout 在计时器用完后（几乎）立即被清除。

因此，生成器函数将更改为：

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 + ')';
    myTimeout = setTimeout(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 + ')';
    clearTimeout(myTimeout);
}

此外，您必须确保声明 myTimeout 以便 generator 函数也可以访问它，因为您希望在单击按钮时清除它。

Answer 3

您的代码有几个问题。

首先，您需要在 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})`;
}

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

ClearInterval doesn't work. What is the problem? How can I solve it?

javascript

clearinterval