카운트 다운이 끝난 라이트 박스

Question

제 문제는 처음으로 타이머가 내려가는 것을 보는 것입니다. 그러나 그 후에는 이상하게 진행되어 결국 브라우저가 충돌합니다.

오류가 발생하는 코드는 여기에 넣습니다. 거대한 것이므로 여기에 모두 넣을 수 없습니다.

자바 스크립트 :

// 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에서 작동하지 않는 이유를 모르겠습니다. 그것은 내 PC에서 잘 작동합니다.

Answer 1

jsfiddle 대신 jsbin을 사용해보십시오. 당신의 바이올린은 jsfiddle보다 jsbin에서 더 잘 작동합니다.

어쨌든 closeLightbox에서 $('#lightbox').empty();을 실행하면 모든 하위 항목이 제거되지만 상위 항목은 그대로 유지됩니다. Lightbox를 삭제 한 후에도 id 라이트 박스가있는 div가 여전히 있음을 의미합니다.

두 번째로 lightbox이 호출되면 $('#lightbox').size() === 0 조건은 요소가 이미 있으므로 false로 평가됩니다.

는 setInterval를 호출하는 코드와 두 번째 문제는 방법이다 $('#lightbox').remove();

와 라인 $('#lightbox').empty();을 대체,이 문제를 해결합니다.

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

그물에 일부 코드를 발견하고 마침내 내가 지금 useing하고있는 코드가, 작동 :

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 

}