LightBox與倒計時關閉

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。你的小提琴在jsbin上比在jsfiddle上更好。

無論如何，在closeLightbox你正在執行$('#lightbox').empty();這將刪除所有的孩子，但讓父母留下。清除燈箱後的意義，仍然有一個ID與燈箱div。

第二次調用lightbox時，條件$('#lightbox').size() === 0的計算結果爲false，因爲該元素已存在。

爲了解決這個問題，有$('#lightbox').remove();

更換線$('#lightbox').empty();與代碼的第二個問題是這樣的，你在呼喚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); 
    } 
} 

Answer 2

發現在網絡上的一些代碼，最後和它的作品，我現在期運用代碼：

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 

}