1

私の問題は、タイマーがダウンしているのを初めて見たときですが、その後はおかしくなり、最終的にブラウザがクラッシュすることです。

エラーが発生するコードをここに入れます。これは巨大なものなので、ここにすべてを入れることはできません。

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;
}

Jsフィドル:

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

jsfiddle で動作しない理由がわかりません。それは私のPCでうまく動作します。

4

2 に答える 2

2

単なる提案ですが、jsfiddle の代わりに jsbin を使用してみてください。あなたのフィドルは、jsfiddle よりも jsbin の方がうまく機能します。

とにかく、すべての子を削除closeLightboxする実行中ですが$('#lightbox').empty();、親はそのままにしておきます。つまり、ライトボックスをクリアした後も、id ライトボックスを持つ div が残っています。

yourlightboxが 2 回目に呼び出されると、要素が既に存在するため、条件$('#lightbox').size() === 0は false と評価されます。

これを修正するには、行$('#lightbox').empty();を次のように置き換えます$('#lightbox').remove();

コードの 2 番目の問題は、 を呼び出す方法です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 回の繰り返しで、setInterval5 回呼び出しています。数回試行した後、これらすべての同時に実行されているCountDown.

将来、 を使用しsetIntervalたい場合は、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);
    }
}
于 2012-11-24T18:18:08.480 に答える
0

ネット上でいくつかのコードが見つかり、最終的に機能します。現在使用しているコードは次のとおりです。

JS:

// 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 id="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);
            CreateTimer(3);
        }

        // 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 CreateTimer(Tiempo) {
    TotalSeconds = Tiempo;

    UpdateTimer();
    window.setTimeout("Tick()", 1000);
}

function Tick() {
    if (TotalSeconds <= 1) {
        closeLightbox();
        return;
    }

    TotalSeconds -= 1;
    UpdateTimer();
    window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
    $('#countDown').html("Esta ventana se cerrará en " + TotalSeconds + " segundos");
}

// close the lightbox
function closeLightbox(){

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

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

        // remove contents of lightbox in case a video or other content is actively playing


    })(jQuery); // end jQuery wrapper

}
于 2012-11-27T01:39:28.840 に答える