clearInterval() 不清除 setInterval()

Question

这段代码有什么问题？

区间不会清零，能想到的我都试过了

我已经搜索了其他问题，找不到答案，也有类似的问题，但解决方案在这里不起作用！

var opacity = 1;
var opac = opacity * 100;
var fadeInterval;
var fadeTiming = fade_timing / 100;
function fadeOut() { console.log("fadeOut called!");
    opac = opac - 1;
    opacity = opac / 100; console.log("fading... opacity: " + opacity);
    image.style.opacity = opacity;
    if(opac < 0) {setInterval(fadeIn, fadeInterval)};
};
function fadeIn() { console.log("fadeIn called!");
    opac = opac + 1;
    opacity = opac / 100; console.log("fading... opacity: " + opacity);
    image.style.opacity = opacity;
    if(opac > 100) {clearInterval(fadeInterval); console.log("clearInterval")};
};

function fade() { console.log("fade called!");
    fadeInterval = setInterval(fadeOut, fadeTiming);
};

Answer 1

var opacity = 1;
var opac = opacity * 100;
var fadeInterval;
var fadeTiming = fade_timing / 100;
function fadeOut() { console.log("fadeOut called!");
    opac = opac - 1;
    opacity = opac / 100; console.log("fading... opacity: " + opacity + ". opac: " + opac);
    image.style.opacity = opacity;
    if(opac < 0) { clearInterval(fadeInterval);fadeInterval=setInterval(fadeIn, fadeInterval)};
};
function fadeIn() { console.log("fadeIn called!");
    opac = opac + 1;
    opacity = opac / 100; console.log("fading... opacity: " + opacity);
    image.style.opacity = opacity;
    if(opac > 100) {clearInterval(fadeInterval); console.log("clearInterval")};
};

function fade() { console.log("fade called!");
    fadeInterval = setInterval(fadeOut, fadeTiming);
};

在设置 fadeOut 之前清除 fadeInterval :)

Answer 2

您需要清除 fadeOut()

中的第一个区间

var opacity = 1;
var opac = opacity * 100;
var fadeInterval;
var fadeTiming = fade_timing / 100;

function fadeOut() {
    console.log("fadeOut called!");
    opac = opac - 1;
    opacity = opac / 100;
    console.log("fading... opacity: " + opacity);
    image.style.opacity = opacity;
    if (opac < 0) {
        //clear the interval from fade here
        clearInterval(fadeInterval);
        //store the new interval reference in fadeInterval
        fadeInterval = setInterval(fadeIn, fadeInterval)
    };
};

function fadeIn() {
    console.log("fadeIn called!");
    opac = opac + 1;
    opacity = opac / 100;
    console.log("fading... opacity: " + opacity);
    image.style.opacity = opacity;
    if (opac > 100) {
        //clear the interval created in fadeOut
        clearInterval(fadeInterval);
        console.log("clearInterval")
    };
};

function fade() {
    console.log("fade called!");
    fadeInterval = setInterval(fadeOut, fadeTiming);
};

Answer 3

问题似乎出在函数 fadeOut()，在这一行：

if(opac < 0) {setInterval(fadeIn, fadeInterval)}; //<-- required fadeTiming instead, also missing the assignment

试试这个：

if(opac < 0) {
  clearInterval(fadeInterval); //make sure if the interval isn't already running
  fadeInterval = setInterval(fadeIn, fadeTiming);
}

clearInterval() 不清除 setInterval()

clearInterval() not clearing setInterval()

javascript

intervals

clearinterval