JavaScript：暂停一个函数并等待全局变量

Question

有一个全局变量window.listNodes是一个数组。该变量每3秒刷新一次，并按顺序填充。

另一个函数onOpen()由用户触发，需要全局变量window.listNodes包含3个元素，不少于此数。 我想要做的是：如果全局变量的.length不等于3，则程序会等待代码的其他部分填充window.listNodes，然后重新开始函数onOpen()。

socket.onopen = function onOpen() {
        if (window.listNodes.length === 3) {
            // Do something
        } else {
            // Wait and when window.listNodes.length === 3:
            onOpen(); 
        }
    });
};

有没有简单的方法来实现这个？我尝试使用函数 setTimeOut() 和生成器函数以及关键字 yield，但是失败了。

非常感谢您宝贵的帮助 :)

- Bastian Nanchen

---

我在我的答案中展示了如何使用setTimeout函数来实现这一点。你是怎么做到的？ - Max Koretskyi

Answer 1

可以使用setTimeout和自定义时间间隔来等待，例如500毫秒，然后执行：

function onOpen() {
        if (window.listNodes.length === 3) {
            // Do something
        } else {
            // Wait and when window.listNodes.length === 3:
            setTimeout(onOpen, 500);
        }
    });
};

socket.onopen = onOpen;

- courses.indepth.dev

Answer 2

使用 Promises：

function getListNodes() {
  return new Promise(function check(resolve) {
    if (window.listNodes.length === 3) { return resolve(window.listNodes); }
    setTimeout(() => check(resolve), 500);
  });
}

socket.onopen = async function() {
  const listNodes = await getListNodes();
  // use listNodes normally
};

在async函数中，await关键字会暂停函数直到等待的Promise被解决（或拒绝）。

从getListNodes()返回的Promise将每500毫秒重试查找，并在找到足够长度时解决。

请注意，本地只有Chrome和Edge支持async函数。您需要Babel + Babel polyfill才能在任何地方使用它们。

- Madara's Ghost