Question

我制作的网站的内容会消失并重新显示。因此，当用户点击某个按钮时，<div>的内容会淡出并相对于点击的图标淡入内容。

第一次点击功能getabout时效果正常，但每当我点击clear()然后再点击getabout时，它就会开始闪烁。我发现它对div进行了clean但发生了内容从零开始再次出现并变得间歇性的情况。

这是我的JavaScript代码，它已经评论过，所以你可以帮我一把：

var check = null; //this will be checking the instance of div's content
const wait_time = 50; //the time it will take to fade

function getabout(id) {
    /*  prevent second call to the same function to bug */
    if (check == id) return;
    var titleOpacity = 0,
        textOpacity = 0;
    /*  this changes the title first    */
    document.getElementById("title").style.opacity = 0;
    document.getElementById("title").innerHTML = "this is the title";
    // recursive call to the opacity changer, it 
    // increases opacity by 0.1 each time until it's 1
    setInterval(function () {
        titleOpacity = fadeIn(titleOpacity, 'title');
    }, wait_time);
    /*  changes the content next to the title   */
    window.setTimeout(function () {
        document.getElementById("dialog").style.opacity = 0;
        document.getElementById("dialog").innerHTML = "this is the content";
        setInterval(function () {
            textOpacity = fadeIn(textOpacity, 'dialog');
        }, wait_time);
    }, 500);
    check = id; // defines the instance "about" at the moment
}

function fadeIn(opacity, id) {
    opacity += 0.1;
    document.getElementById(id).style.opacity = opacity;
    document.getElementById(id).style.MozOpacity = opacity;
    if (opacity >= 1.0) clearInterval(listener);
    return opacity;
}

function clear() {
    var opacity = document.getElementById("title").style.opacity;
    // supposed to decrease the opacity by 0.1 but it's not doing that
    setInterval(function () {
        opacity = fadeout(opacity);
    }, wait_time);
    //cleans the title and dialog to fill with the next button user clicked
    document.getElementById("title").innerHTML = "";
    document.getElementById("dialog").innerHTML = "";
}

function fadeout(opacity) {
    opacity -= 0.1;
    document.getElementById("title").style.opacity = opacity;
    document.getElementById("dialog").style.MozOpacity = opacity;
    if (opacity <= 0.0) clearInterval(listener);
    return opacity;
}

function getregister(id) {
    if (check == id) return;
    clear(); // proceed to fade out the content and clean it
    check = id;
}

我不明白代码的错误是什么。使用clear()功能，它应该平滑淡出内容，然后清理它。但它只是清理div。下次我使用getabout()功能，而不是像第一次那样顺利淡入时，它会开始闪烁。

我对网络编程比较陌生，我现在拒绝JQuery。我想在转到JQuery之前深入了解javascript，这就是为什么我只想了解纯JavaScript解决方案和对此的考虑。

Answer 1

我设法提出我的评论，所以再试一次！

我认为你的问题是你没有正确清除setInterval - 确保你使用listener = setInterval（...）

因为它是你的clearInterval（听众）;由于没有定义“听众”，所以什么都不做。所以你的淡出功能继续运行。

javascript，div闪烁而不是褪色

1 个答案: