javascript - 直到 localStorage.getItem 为 '1' - Javascript

Question

我有这个代码:

    localStorage.setItem('try', '1');
    setTimeout(function(){localStorage.setItem('try', '2');}, 2000);


    while(localStorage.getItem('try') == '1')
    {
        console.log('a');
    }

为什么它不起作用？这个 while 循环应该一直工作到 localStorage.getItem('try') == '1'。 2 秒后 localStorage.setItem('try', '2') 所以这个 while 应该停止但不这样做:( 为什么？我应该用什么来让它工作？

Answer 1

因为页面上的主要 JavaScript 由浏览器在单个线程中运行(连同浏览器 UI，在大多数浏览器上)，所以您的定时回调位于作业队列中等待当前正在运行的作业(带有 while 循环的那一个)完成。由于您的 while 循环作业永远不会完成，因此永远不会运行下一个作业。

永远不要在基于浏览器的 JavaScript 中忙等待(这在任何环境中都不是一个好主意)。相反，通过 setTimeout 安排回调以在允许其他作业运行后检查结果，例如:

localStorage.setItem('try', '1');
setTimeout(function() {
    localStorage.setItem('try', '2');
}, 2000);

function check() {
    if (localStorage.getItem('try') != '1') {
        console.log('a');
    } else {
        setTimeout(check, 0);
    }
}

setTimeout(check, 0);

当然，这是一个非常激进的检查。您可以使用更高的间隔，可能是 100(10 次/秒)或 250(4 次/秒)。

---

旁注:我使用 0 作为回调时间，这基本上是将定时器回调立即添加到作业队列(但在其他作业之后)。浏览器会在第一次时遵守这一点，但是当计时器回调调度一个计时器时，它又调度一个计时器等等，最终浏览器会添加一个 4 毫秒的最小延迟(例如，表现得就像你传递了 4 而不是 0)。有关详细信息，请参阅 timers section of the HTML spec (这不仅仅是 HTML)。