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

如果条件满足，如何创建一个循环并停止它？

2 个答案: