javascript - 关闭倒计时的灯箱

Question

我的问题是，我第一次看到计时器开始计时，但之后就变得奇怪了，最后浏览器崩溃了。

我将给出错误的代码放在这里，这是一个巨大的东西，所以我不能把它全部放在这里。

JavaScript:

// display the lightbox
function lightbox(insertContent) {

    // jQuery wrapper (optional, for compatibility only)
    (function($) {
        // add lightbox/shadow <div/>'s if not previously added
        if ($('#lightbox').size() === 0) {
            var theLightbox = $('<div id="lightbox"/>');
            var theShadow = $('<div id="lightbox-shadow"/>');
            var countDown = $('<div class="countDown"/>');
            $(theShadow).click(function(e) {
                closeLightbox();
            });
            $('body').append(theShadow);
            $('body').append(theLightbox);
            $('body').append(countDown);
        }

        // insert HTML content
        if (insertContent !== null) {
            $('#lightbox').html(insertContent);
            $('#lightbox').corner("15px");

            // ALWAYS LAST
            //$('#lightbox').append(countDown);
            CountDown(5);
        }

        // move the lightbox to the current window top + 100px
        $('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');
        $('#lightbox-shadow').css('top', $(window).scrollTop());
        $('.countDown').css('top', $(window).scrollTop() + 150 + "px");

        // display the lightbox
        $('#lightbox').show();
        $('#lightbox-shadow').show();
        $('.countDown').show();

    })(jQuery); // end jQuery wrapper
}

function CountDown(tiempo) {
    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }
    var IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

// close the lightbox


function closeLightbox() {

    // jQuery wrapper (optional, for compatibility only)
    (function($) {

        // hide lightbox/shadow <div/>'s
        $('#lightbox').hide();
        $('#lightbox-shadow').hide();
        $('.countDown').hide();

        // remove contents of lightbox in case a video or other content is actively playing
        $('#lightbox').empty();

    })(jQuery); // end jQuery wrapper
};

$(document).ready(function() {
    $("#Login").click(function(event) {
        event.preventDefault();
        lightbox("Username Not Available");
        $("#lightbox").css("color", "#FF0000");
    });
});

HTML:

<input type="button" id="Login" value="Hello">

CSS:

#lightbox {
    position: absolute;
    width: 50%;
    left: 25%;
    background: #fff;
    z-index: 1001;
    display: none;

    color: #069;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px #000;
}
#lightbox-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=90);
    -moz-opacity: 0.90;
    -khtml-opacity: 0.90;
    opacity: 0.90;
    z-index: 1000;
    display: none;
}

.countDown {
    position: absolute;
    width: 50%;
    left: 25%;
    background: #fff;
    z-index: 1002;
    display: none;

    color: #069;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-variant: small-caps;
    font-weight: normal;
    margin: 10px auto;
    display: none;
}

JsFiddle:

http://jsfiddle.net/c2gx9/6/

不知道为什么它在 jsfiddle 上不起作用；它在我的电脑上运行良好。

Answer 1

只是一个建议，尝试使用 jsbin 而不是 jsfiddle。你的 fiddle 在 jsbin 上比在 jsfiddle 上工作得更好。

无论如何，在 closeLightbox 中，您正在执行 $('#lightbox').empty(); 这将删除所有子项，但保留父项。意思是清除 lightbox 后，仍然有一个 id 为 lightbox 的 div。

第二次调用 lightbox 时，条件 $('#lightbox').size() === 0 的计算结果为 false，因为元素已经存在。

要解决此问题，请将行 $('#lightbox').empty(); 替换为 $('#lightbox').remove();

代码的第二个问题是调用 setInterval 的方式。

function CountDown(tiempo) {
    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }

    var IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

js引擎将代码翻译成这样

function CountDown(tiempo) {
    var IntervalID;

    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }

    IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

IntervalID 是函数的局部变量。每次调用该函数时，都会从头开始创建变量。所以实际上，你永远不会清除间隔。您只是递减 tiempo 变量。

“浏览器变得疯狂”的一个可能原因是只执行一次 setInterval 将重复调用指定的函数，直到明确停止。在倒计时中，超过 5 次迭代，您将调用 setInterval 5 次。您可以想象，经过几次尝试后，浏览器会因所有这些同时运行的 CountDown 实例而重载。

将来如果你想使用setInterval，你可能想要read the documentation at MDN .该站点是一个非常好的 HTML、JS 和 CSS 资源。

最后，您将函数名称作为字符串参数传递给 setInterval。由于各种原因，它有点不受欢迎。我选择不这样做的原因是，只有当该函数可全局访问时，代码才能工作。为了封装和不污染全局命名空间，人们推荐其他方法。

回到如何解决这个问题，我应该第一时间注意到 setInterval 错误。我没有，那是我的错。您已经找到适合您的解决方案。为了完整起见，我将包括我将如何要求您修复它。

function CountDown(tiempo) {
    if (tiempo <= 0) {
        closeLightbox();

    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;

        setTimeout(function () { 
            CountDown(tiempo);
        }, 1000);
    }
}