JQuery 알림이 하나씩 차례로 튀어 나오게됩니다.

Question

페이지에 무언가가 저장되거나 오류가 발생하면 알림 메시지가 나타나 결과를 말하는 알림이 표시됩니다.

HTML과 JQuery는 둘 다 잘 작동하므로 3 개의 알림이 동시에 발생하면 3 개의 슬라이드가 모두 들리지만 5 초 이내에 페이드 아웃 될 때 맨 위의 슬라이드 만 슬라이드됩니다.

var notificationsQueue = []; 

function createNotification(text) { 
    $obj = $('<div>' + 
      '<div class="notification animated">' + 
       '<div class="notification-left-container">' + 
        '<div class="notification-icon"></div>' + 
       '</div>' + 
       '<div class="notification-right-container">' + 
        '<div class="notification-right-inner-container">'+text+'</div>' + 
       '</div>' + 
       '<div class="notification-clear-both"></div>' + 
      '</div>' + 
     '</div>').prependTo('#notifications_list div.notifications-pusher'); 

    $obj.show('slide', { 
    direction: 'left' 
    }, 500); 

    notificationsQueue.push($obj); 
} 

이제 위의 코드가 서로의 상단에 알림을 표시

여기 JQuery와 코드입니다. 그것이 내가 다음 코드를 사용 그들을 밖으로 밀어 올 때 :

setInterval(function() { 
    if (notificationsQueue.length) { 
     $obj = notificationsQueue.pop(); 


     setTimeout(function() { 
      $obj.hide('slide', { 
       direction: 'left' 
      }, 500); 
     }, 3000); 

    } 
}, 500); 

그래서 모든 반 다음 마지막 팝업 3 초에서 밀어하지 않을 경우 알림 큐가 빈 상태 (empty)의 경우 확인하는 두 번째. 위의 코드는 나머지 div가 아닌 최상위 div 만 슬라이드합니다. 나머지는 페이지에 머물러 있습니다.

Answer 1

코드 스 니펫에서 $ obj가 정의 된 방법은 분명하지 않지만 전역 변수 인 것으로 보입니다. 먼저 'hide'가 호출되기 전에 $ obj의 값은 setInterval의 익명 함수 호출에 의해 다시 작성됩니다.

$ obj를 local var으로 변경하면 setTimeout의 익명 함수가 $ obj에 대한 자체 참조를 가져옵니다. closures

setInterval(function() { 
    if (notificationsQueue.length) { 
     var $obj = notificationsQueue.pop(); 

     setTimeout(function() { 
      $obj.hide('slide', { 
       direction: 'left' 
      }, 500); 
     }, 3000); 
    } 
}, 500);