JavaScript 方法有效和无效

Question

我什至很难问这个问题，因为我不明白发生了什么。

基本上，我有一个旋转加载器元素，应该在我的 javascript 运行时显示。在 javascript 结束时，应关闭加载程序，并应显示一个模式，其中包含从数据库查询的数据。问题是加载程序永远不会显示。在创建模态之前运行查询大约需要 1 - 2 秒的等待时间。

function includeConnectionJS() {
    if (!(typeof sforce === "object")) {
        var connectionJS = document.createElement('script');
        var documentHead = document.getElementsByTagName('head')[0];

        connectionJS.src = '/soap/ajax/38.0/connection.js';
        connectionJS.setAttribute('onload', 'createLoader();createModal();');
        documentHead.appendChild(connectionJS);
    } else {
        createLoader();
        // Checks to see if the loader element exists. If it does not, create the element and than toggle it to display it.
        // If the element already exists, display the modal
        createModal();
        // Checks to see if the modal element exists, if it does not, create the element and than turn off the loader and display the modal.
        // If the element already exists, turn off the loader and display the modal
    }
}

我将 console.logs 放入我的方法中，我可以清楚地看到该方法正在被调用，if 语句都在传递，并且元素的可见性在正确的时间更改为正确的值。一切似乎都暗示它应该正常工作，但该元素从未实际显示。

我可以通过将 createModal 的调用更改为如下所示来显示它:

setTimeout(function(){createModal()}, 100); // Most values for delay worked.

我不想创建人为延迟只是为了显示加载程序的效果。

我主要关心的是 createModal 方法调用数据库。这些会导致 javascript 执行延迟(我称它们为同步，而不是异步)。我可以清楚地看到加载程序显示在查询之前被设置为“阻止”，观察所有查询调用并返回，并看到加载程序的显示以正确的顺序变回“无”。更重要的是，如果我调用 createLoader();直接从控制台调用方法，它可以工作。

我就是不知道我错过了什么。

Answer 1

使用同步 Javascript 调用，您会阻塞 UI 和事件循环中排队的其他函数 https://developer.mozilla.org/en/docs/Web/JavaScript/EventLoop#Run-to-completion 。请务必记住，Javascript 代码是在单线程中执行的。因此没有代码可以并行执行，其他所有事情都必须等到当前任务完成。实际上，这意味着您希望函数尽快完成其工作，以便其他操作(UI 更新、键盘/鼠标事件等、超时或异步回调等)可以执行。它们都必须等到您通过完成当前代码块将控制权交回给引擎。

setTimeout 之所以有效，是因为它将长时间运行的 createModal 函数添加到事件队列中，以便在将来的某个时间执行(即使设置为 0ms - 它不保证立即执行)执行它只是说在第一个机会你可以在 0 毫秒过去后的某个时间。如果你有一个长时间运行的函数，实际上可能是 10 秒后)。这样做可以让调用函数快速完成，并且 UI 现在可以应用任何更新。现在，当 javascript 引擎准备好运行更多代码时，它将查找事件循环中记录的下一个代码块。这次当它运行 createModal 时，它将再次阻止对 UI 等的更新，处理鼠标和键盘事件等，但现在 UI 有机会更新，你将拥有你的微调器.

因此，选择是:要么在函数中使用异步调用，以便快速完成，或者如果不可能，则在 UI 更新后继续使用 setTimeout() 对长时间运行的任务进行排队。