如果滿足條件，如何創建循環並停止循環？

Question

我有一個函數，在1秒鍾后將消息發布到父組件。

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

我想對其進行重構，以便創建一個循環，該widgetHeight每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();
    ....

})

請注意，在這里，我直接使用window，但是它也可以是任何其他window對象。

另外，有關調整大小事件的更多信息，請參見： https ： //developer.mozilla.org/en-US/docs/Web/Events/resize