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

问题似乎出现在函数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);
}

Answer 2

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 3

您需要清除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);
};

clearInterval（）不清除setInterval（）

3 个答案: