다음 대화 상자에서 jquery 대화 상자의 시간 제한을 재설정하는 방법은 무엇입니까?

Question

사이트 전체에 add-to-bag 단추가 있으며 동적 팝업이 방금 추가 된 내용을 인식 한 것처럼 보이게 한 다음 사라집니다. 다른 추가 버튼을 클릭하면 이전 대화 상자의 제한 시간이 첨부됩니다. 이 문제를 해결하기 위해 다음 대화 상자에 마지막 10,000 개의 setTimeout이 있습니다. 그 중 하나는 마지막 것부터 남았습니다 (트릭을하지는 않습니다).

대화는 제품 데이터와 외부 닷넷 페이지에서 동적 콘텐츠로드 대화 상자가 addToBagDialogVar에로드되는 이유 그래서 에 사용할 수 CloseDialog와입니다 해당 페이지 내부에 가까운 링크를 가지고있다

$(document).ready(function() 
{ 
    // Create object for future dialog box - so it's available to the close method 
    var addToBagDialogVar = $('<div id="addToBagDialogBox"></div>'); 
    var autoCloseTimeout = 10000; 
    var dialogTimer; 

    $(".addToBagPU").click(function (e) 
    { 
     var result = ""; 
     $.get(this.href, function (data) { SetData(addToBagDialogVar, data); }); 
     return false; 
    }); 

    // Start listening for the close link click 
    $(document).on("click", "#bagPUCloseLink", function (event) 
    { 
     event.preventDefault(); 
     CloseDialog(addToBagDialogVar); 
    }); 

    function SetData(addToBagDialogVar, data) 
    { 
     result = data; 
     var regex = data.match("{{(.*)}}"); 
     var bagCount = regex[1]; 

     addToBagDialogVar.html(result).dialog({ 
      open: function() 
      { 
       clearTimeout(dialogTimer); 
       $(".ui-dialog-titlebar-close").hide(); 
       SetBagCount(bagCount), 
       dialogTimer = setTimeout(function() { CloseDialog(addToBagDialogVar); }, autoCloseTimeout); 
      }, 
      show: { effect: "fadeIn", duration: 800 }, 
      close: function() { clearTimeout(dialogTimer); }, 
      width: 320 
     }); 
    } 

    function CloseDialog(closeThisDialog) 
    { 
     closeThisDialog.dialog("close"); 
     closeThisDialog.dialog("destroy").remove(); 
    } 
}); 

.

모두 잘 작동합니다. 그것은 일어나고있는 것처럼 보이지 않는 타이머의 재설정입니다. 한 페이지 아래로 가서 각 가방을 가방에 추가하면 세 번째 또는 네 번째 대화 상자는 첫 번째 대화 상자 setTimeout을 사용하고 있기 때문에 잠시만 있습니다.

나는 읽고 기억하고 너무 많은 다른 방법을 시도하고 지금 내 두뇌가 울창합니다.

Answer 1

나는 당신이 관찰하는 행동에 대한 대체 설명을 제안합니다. 첫 번째 "장바구니에 추가"를 클릭하면 타이머가 시작됩니다. "장바구니에 추가"를 클릭하면 페이지가 내려갈 때마다 새 타이머가 시작됩니다. 겹치는 부분이 없으며 정상적으로 작동하는 별개의 타이머 만 있습니다 (단, 각 대화 상자가 이전에 만든 타이머 ID를 날려 버렸음에도 불구하고 다시 돌아올 예정입니다).

첫 번째 대화 상자의 타이머가 만료되면 HTML ID를 통해 대화 상자가 닫히고 jquery $('div#addToBagDialogBox').closeOrSomethingLikeThat()과 같은 내용으로 닫힙니다. 즉, addToBagDialogBox의 ID가있는 div의 모든 대화 상자가 닫힙니다. 첫 번째 타이머 만료일은 모두 동일한 HTML ID를 사용하기 때문에 대화 상자를 닫는 것입니다. 다른 타이머는 완벽하게 작동하지만 만료되면 수행 할 시간이 없습니다.

작성한 각 대화 상자에 고유 한 HTML ID를 지정하여 초기 닫기 문제를 수정할 수 있습니다. 또한 대화 상대별로 타이머 ID를 관리해야하므로 각 대화 상자마다 고유 한 타이머 ID가 있습니다.

편집 : 당신이 묘사 한 시나리오의 세부 사항을 생각해보십시오. 귀하의 첫 번째 타이머가 정상적으로 작동하고 있으며, 첫 번째 대화가 아직 남아있는 동안 다른 네 개의 타이머를 시작합니다. 다섯 번째 타이머의 ID는 변수 dialogTimer에 있습니다. 따라서 첫 번째 대화 상자의 타이머가 만료되면 close 처리가 발생하고 clearTimeout 번을 다섯 번째 대화 상자의 타이머 ID로 호출합니다. 따라서 첫 번째 대화 상자의 타이머가 만료되고 대화 상자가 다른 대화 상자를 모두 닫았으며 정리 작업이 다섯 번째 타이머를 취소했습니다. 세 개의 다른 타이머가 계속 실행 중이며, ID는 영원히 손실됩니다. 결국 마침내 만료되고 종료 기능은 실행되지만 완전히 영향을 미치지 않고 오랫동안 사라진 대화 상자가 사라집니다. 죄송합니다, 진실은 여기 있습니다.