我如何使用 clearInterval() 或其他方法使 javascript 中使用 setInterval() 的淡入淡出背景脚本停止？

Question

我有一个嵌套的闭包函数，它根据数组中的分配循环和淡化我的背景颜色。在我开始使用 onclick "stopFadeColors()" 方法的按钮上，如何通过单击第二个按钮实际停止运行中的脚本？

<style>
.black {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background: #000;
}
.white {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background: #fff;
}
</style>
<script>
//make the element start blinking at a rate of once per second.
function fadeColors(target) {
    var elem = document.body; //assign the object to a shorter named object
    var toggleColor = ["black", "white"]; // setup color list, it can be more than two
    var counter = 0; //outer counter
    var nextColor; //outerClass
    function changeBackgroundColor() {
        console.log(counter); // output count 
        counter = (counter + 1) % toggleColor.length; //modulus of counter divided by counter length
        nextColor = toggleColor[counter]; //update the class 
        elem.className = nextColor; //assign the class
    }
    setInterval(changeBackgroundColor, 1000); //call our function 
}
</script>
<button onclick="fadeColors()">Fade Background</button>
<!-- how can i make this next button call a new or existing method and pause the script with clearInterval() or some other way? --//>
<button onclick="stopFadeColors()">Stop Fade Background</button>

Answer 1

您需要将 setInterval() 函数分配给一个变量：

function fadeColors(target) {
    var elem = document.body; //assign the object to a shorter named object
    var toggleColor = ["black", "white"]; // setup color list, it can be more than two
    var counter = 0; //outer counter
    var nextColor; //outerClass
    function changeBackgroundColor() {
        console.log(counter); // output count 
        counter = (counter + 1) % toggleColor.length; //modulus of counter divided by counter length
        nextColor = toggleColor[counter]; //update the class 
        elem.className = nextColor; //assign the class
    }
    document['intervalTemp'] = setInterval(changeBackgroundColor, 1000); //call our function 
}

HTML:

<button onclick="fadeColors();">Fade Background</button>

点击停止的其他按钮：

<button onclick="clearInterval(document.intervalTemp);">Stop Fade Background</button>

我如何使用 clearInterval() 或其他方法使 javascript 中使用 setInterval() 的淡入淡出背景脚本停止？

How can I use clearInterval() or some other method to make my fade background script in javascript that uses setInterval() stop?

javascript

setinterval

clearinterval