ループを作成し、条件が満たされたらループを止めるには？

Question

私は1秒後に親コンポーネントにメッセージをポストする関数を持っています。

setTimeout(function(){ 
var widgetHeight = getDocHeight(); 
parent.postMessage(widgetHeight, hostURL); 
}, 1000) 

私はそれが親にメッセージを投稿してループを停止するよりも、変更した場合、私はすべての1/10秒widgetHeightをチェックするループを作成し、そのようにこれをリファクタリングしたいと思います。

どうすればいいですか？

Answer 1

間隔を使用して繰り返し可能なタイマーを作成します。

 let timer 
     let prevWidgetHeight = getDocHeight(); //Get initial height 
     timer = setInterval(function(){ 
      let widgetHeight = getDocHeight(); //Get the current height 
      //Compare new height to previous height: 
      if(widgetHeight !== prevWidgetHeight) { //If the current height is not the same as the initial height, 
      prevWidgetHeight = widgetHeight 
      parent.postMessage(widgetHeight, hostURL); //Make the update 
      clearInterval(timer) //Stop the timer 
      }  
     }, 100) //100ms is 1/10th of second 

ループを開始する前に設定した高さと異なると、ループが停止します。それを停止すると、新しい変更は渡されません。

Answer 2

まず、これをループで実行することはできません。 Javascriptはシングルスレッドなので、これをループで実行するとjavascriptプロセスがロックされ、変更されない値のチェック以外は何も起こらないように効果的にブロックされます。

他にも触れましたが、setIntervalメソッドは機能しますが、ドキュメントサイズが変更されたときに何かを更新する予定があるためです。代わりにこれを使用する必要があります：

window.addEventListener('resize', function (evt) { 
    // do something on resize getDocHeight() 
    var height = getDocHeight(); 
    .... 

}) 

ここでは、私は直接ウィンドウを使用していますが、他のウィンドウオブジェクトも使用できます。ここでは、resizeイベントに

また、より多くの情報： https://developer.mozilla.org/en-US/docs/Web/Events/resize