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

遅延タイマー、意志 "ブロック" - すなわち豚プロセッサ。

ブロッキングは、他のjavascriptの実行を妨げるだけでなく、コンソールを含むブラウザ画面の信頼性のあるリフレッシュも禁止します。したがって、deferred.notify(i)とconsole.log("In Progress: " + data)ステートメントが実行されている間は、プロセッサが自由になるまでコンソールは更新されません。

驚くべきことに、解決策はwhile()を使用しないことにあります。

幸いにも、ジャバスクリプトimcludes概念的while()アイドラ異なるが、を遮断することなく、同一の役割.... を満たす2つの組み込み方法window.setTimeout()とwindow.setInterval()、。

• window.setInterval(fn, t)火災がfnごとのtミリ秒機能、
• window.setTimeout(fn, t)火災は、Tミリ秒後に、一度fn機能します。

どちらのメソッドも、不透明な参照を返します。これにより、それらを取り消すことができます。

start()のコードでは、process()が大きく変更され、sleep()が消滅しました。

process()は以下のない：

• ：
  • は、その機能が1000ミリ秒（1秒）のsetInterval()を、establises jQueryの繰延作成し、それに由来する約束を返し、
  • は、カウンタiが到達するまで毎秒deferred.notify()を呼び出しますそれ以外の場合は静かに離れて無限にチェックを入れます
    • 間隔を、クリアされ、
    • deferred.resolve()またはdeferred.reject()を決済するために呼ばれて、：指定した最大値に達したときに最大x、
  • を指定据え置き（およびその約束）、

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