jQuery 지연 약속 진행 알림

Question

저는 약속을 지키고 진행 상황 알림을 작성하려고했습니다.

코드는 모든 함수를 올바른 순서로 실행하지만 진행 상황 업데이트는 실제로 발생했을 때와 반대로 해결하기 전에 실행됩니다.

누구든지 내가 잘못하고있는 것을 지적 할 수 있습니까? 여기

function start(x) { 
    console.log("Start: " + x); 
    var promise = process(x); 
    console.log("promise returned"); 
    promise.then(function(data) { 
     console.log("Completed: " + data); 
    }, function(data) { 
     console.log("Cancelled: " + data); 
    }, function(data) { 
     console.log("In Progress: " + data); 
    }); 
    } 

    function process(x) { 
    var deferred = $.Deferred(); 
    var promise = deferred.promise(); 

    // process asynchronously 
    setTimeout(function() { 
     for (var i=0 ; i<x ; i++) { 
     sleep(1000); 
     deferred.notify(i); 
     } 

     if (x % 2 === 0) { 
     deferred.reject(x); 
     } else { 
     deferred.resolve(x); 
     } 
    }, 0); 

    return promise; 
    } 

    function sleep(sleepDuration) { 
    var now = new Date().getTime(); 
    while(new Date().getTime() < now + sleepDuration){ /* do nothing */ } 
    } 

    start(3); 

바이올린 : while()로 구현 https://jsfiddle.net/n86mr9tL/

Answer 1

지연 타이머 것 "블록"- 즉, 돼지 프로세서.

블로킹은 다른 자바 스크립트가 실행되는 것을 방해 할뿐만 아니라 콘솔을 포함하여 브라우저 화면을 안정적으로 새로 고치는 것을 방해합니다. 따라서 deferred.notify(i) 및 console.log("In Progress: " + data) 문이 실행되는 동안 프로세서가 자유롭게 될 때까지 콘솔이 새로 고쳐지지 않습니다.

놀랍지 않게도 해결책은 while()을 사용하지 않는 것입니다.

다행히하지만 while() 아이들러 개념적으로 서로 다른 두 개의 내장 방법 window.setTimeout() 및 window.setInterval() 자바 스크립트 imcludes는을 차단하지 않고 .... 을 같은 역할을 수행.

• window.setInterval(fn, t) 화재
• window.setTimeout(fn, t) 화재가 t 밀리 초 후에, 한번 fn를 작동 fn t 매 밀리 초, 기능.

두 가지 방법 모두 불투명 한 참조를 반환하므로 취소 될 수 있습니다.

아래 코드에서 start()은 수정되지 않고 process()은 크게 수정되었으며 sleep()은 사라졌습니다.

• : 그 기능
  • 가 jQuery를 지연된 만들고 유래의 약속을 반환
  • 가 setInterval() 1000 밀리 establises (1 초) :

    process() 이제 다음을 수행

  • 카운터가 i에 도달 할 때까지 매초 deferred.notify()을 호출합니다.
가 지정된 최대에 도달했을 때, x 지정된 최대 :
• deferred.resolve() 또는 deferred.reject(),
  • 그렇지 않으면 자동으로 멀리 무한히 체크 할 간격이, 클리어하면 해결하도록 부름 지연된 (및 약속),

function start(x) { 
    console.log("Start: " + x); 
    process(x).then(function(data) { 
     console.log("Completed: " + data); 
    }, function(data) { 
     console.log("Cancelled: " + data); 
    }, function(data) { 
     console.log("In Progress: " + data); 
    }); 
} 

function process(x) { 
    return $.Deferred(function(dfd) { 
     var i = 1; 
     var intervalRef = setInterval(function() { 
      if(i < x) { 
       dfd.notify(i++); 
      } else { 
       clearInterval(intervalRef); 
       dfd[(x % 2 === 0)?'reject':'resolve'](x); 
      } 
     }, 1000); 
    }).promise(); 
} 

console.clear(); 
start(3); 

Updated fiddle