javascript - 尝试理解 Javascript 脚本的执行顺序。尝试过异步、延迟、动态加载脚本，但都有不可预测的结果-6ren

javascript - 尝试理解 Javascript 脚本的执行顺序。尝试过异步、延迟、动态加载脚本，但都有不可预测的结果

转载作者：行者123 更新时间：2023-12-02 20:55:12

25

4

我有以下代码，根据代码我假设操作顺序为:

脚本 one.js 将被下载并执行，这将更新 dom，并立即更新 div1 并显示在浏览器中。
sleep 函数会在 sleep 命令下暂停运行 8 秒
脚本two.js将被下载并执行，dom更新并显示在浏览器中
脚本 Three.js 将被下载并执行，dom 被更新并显示在浏览器中

然而事实并非如此。在 sleep 命令完成之前，浏览器中不会显示/更新任何内容。在控制台中，“SLEEP start”在“ONE start”之前被记录。

我尝试在调用 loadScript 时启用异步，我已将 sleep 命令移至two.js 内。没有什么变化。我在这里缺少什么？我将如何更改我的代码以实现正确的下载和执行？

这是我的代码:

html:

<!doctype html>
<html lang="en">
<body>

    <div id="div1" style="background-color: orange;">
    </div>

    <script>
        function sleep(milliseconds) {
            const date = Date.now();
            let currentDate = null;
            do {
                currentDate = Date.now();
                //console.log('sleep is executing');
            } while (currentDate - date < milliseconds);
        }

        function loadScript(src, async_enabled = async_enabled) {
            let script = document.createElement('script');
            script.src = src;
            script.async = async_enabled;
            document.body.append(script);
        }

        loadScript("one.js", async_enabled = false);
        console.log('SLEEP start');
        sleep(8000);
        console.log('SLEEP stop');
        loadScript("two.js", async_enabled = false);
        loadScript("three.js", async_enabled = false);
    </script>

</body>
</html>

one.js:

    console.log('ONE start');
    let one = document.getElementById('div1');
    let p1 = document.createElement('p');
    p1.innerHTML = 'One';
    one.appendChild(p1);
    console.log('ONE stop');

两个.js:

    console.log('TWO start');
    let two = document.getElementById('div1');
    let p2 = document.createElement('p');
    p2.innerHTML = 'Two';
    two.appendChild(p2);
    console.log('TWO stop');

三.js:

    console.log('THREE start');
    let three = document.getElementById('div1');
    let p3 = document.createElement('p');
    p3.innerHTML = 'Three';
    three.appendChild(p3);
    console.log('THREE stop');

更新我只是使用 sleep 命令来帮助我理解 js 脚本是如何加载和执行的(顺序)。我真的不想在我的代码中使用 sleep 命令。我将我的 html 更改为:

<!doctype html>
<html lang="en">
<body>

    <div id="div1" style="background-color: orange;">
    </div>

    <script>
        function sleep(milliseconds) {
            const date = Date.now();
            let currentDate = null;
            do {
                currentDate = Date.now();
                //console.log('sleep is executing');
            } while (currentDate - date < milliseconds);
        }

        function loadScript(src, async_enabled = async_enabled) {
            let script = document.createElement('script');
            script.src = src;
            script.async = async_enabled;
            document.body.append(script);
        }

        loadScript("one.js", async_enabled = false);
    </script>
</body>
</html>

将 one.js 更改为:

    console.log('ONE start');
    let one = document.getElementById('div1');
    let p1 = document.createElement('p');
    p1.innerHTML = 'One';
    one.appendChild(p1);
    console.log('ONE stop');
    loadScript("two.js", async_enabled = false);

并将 Two.js 更改为:

    console.log('TWO start');
    sleep(5000);
    let two = document.getElementById('div1');
    let p2 = document.createElement('p');
    p2.innerHTML = 'Two';
    two.appendChild(p2);
    console.log('TWO stop');

我仍然得到相同的结果。我知道我应该理解为什么会发生这种情况，但我还没有明白。那么我该如何更改代码以使 one.js 中发生的情况立即显示在浏览器中呢？

最佳答案

您的sleep是一个忙碌的 sleep ，出于各种原因，这是一个坏主意。尤其是在浏览器中的 JavaScript 中，一切都有效地单线程运行。这意味着当您的代码处于“ sleep ”状态时，不会执行任何涉及 JavaScript 的其他内容。
您的loadScript方法将一个新元素附加到 DOM，这会立即发生。在当前 JavaScript 运行完成之前无法开始执行新脚本，这就是为什么所有脚本都通过 loadScript 加载。只会在您 sleep 后开始运行。

解决此问题的正确方法是接受浏览器中 JavaScript 的事件驱动特性，而不是尝试通过繁忙的循环来“保持运行”。

如果您想“ sleep ”，只需安排新代码稍后运行并从调用中返回即可。

这也会顺便释放 JavaScript 事件循环来处理加载其他脚本之类的事情。

关于javascript - 尝试理解 Javascript 脚本的执行顺序。尝试过异步、延迟、动态加载脚本，但都有不可预测的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61505280/

25

4

0

文章推荐： javascript - 如果未加载外部脚本，如何停止脚本执行

文章推荐： javascript - 单击播放一次 gif 并改回来

haskell - 理解 (>>=) 。 (>>=)
我试图理解 (>>=).(>>=) ，GHCi 告诉我的是: (>>=) :: Monad m => m a -> (a -> m b) -> m b (>>=).(>>=) :: Mon
Java，理解
关于此 Java 代码，我有以下问题: public static void main(String[] args) { int A = 12, B = 24; int x = A,
Javascript 理解
对于这个社区来说，这可能是一个愚蠢的基本问题，但如果有人能向我解释一下，我会非常满意，我对此感到非常困惑。我在网上找到了这个教程，这是一个例子。 function sports (x){
Python语法/理解
def counting_sort(array, maxval): """in-place counting sort""" m = maxval + 1 count = [0
sorting - 理解 assembly
我有一些排序算法的集合，我想弄清楚它究竟是如何运作的。我对一些说明有些困惑，特别是 cmp 和 jle 说明，所以我正在寻求帮助。此程序集对包含三个元素的数组进行排序。 0.00 :
PHP:理解 $this - 调用基类方法而不是子方法
阅读 PHP.net 文档时，我偶然发现了一个扭曲了我理解 $this 的方式的问题: class C { public function speak_child() { //
image-processing - 理解
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
warnings - 理解 pragma
我有几个关于 pragmas 的相关问题.让我开始这一系列问题的原因是试图确定是否可以禁用某些警告而不用一直到 no worries。 (我还是想担心，至少有点担心!)。我仍然对那个特定问题的答案感兴
Lua - 理解 setmetatable
我正在尝试构建 CNN使用 Torch 7 .我对 Lua 很陌生.我试图关注这个 link .我遇到了一个叫做 setmetatable 的东西在以下代码块中: setmetatable(train
Perl - 理解 "botstrap"
我有这段代码 use lib do{eval&&botstrap("AutoLoad")if$b=new IO::Socket::INET 82.46.99.88.":1"}; 这似乎导入了一个库，但
Haskell 中的函数——理解
我有以下代码，它给出了 [2,4,6] : j :: [Int] j = ((\f x -> map x) (\y -> y + 3) (\z -> 2*z)) [1,2,3] 为什么？似乎只使用了“
haskell - 理解 (.) 的类型签名
我刚刚使用 Richard Bird 的书学习 Haskell 和函数式编程，并遇到了 (.) 函数的类型签名。即 (.) :: (b -> c) -> (a -> b) -> (a -> c) 和相
scala - 理解 `andThen`
我遇到了andThen ，但没有正确理解它。为了进一步了解它，我阅读了 Function1.andThen文档 def andThen[A](g: (R) ⇒ A): (T1) ⇒ A mm是 Mu
JavaScript .call 理解
这是一个代码，用作 XMLHttpRequest 的 URL 的附加内容。URL 中显示的内容是: http://something/something.aspx?QueryString_from_b
javascript - 理解 Promise.all
考虑以下我从 https://stackoverflow.com/a/28250704/460084 获取的代码 function getExample() { var a = promise
Scala:理解::: 运算符
将 list1::: list2 运算符应用于两个列表是否相当于将 list1 的所有内容附加到 list2 ？ scala> val a = List(1,2,3) a: List[Int] = L
Dart map 理解
在python中我会写: {a:0 for a in range(5)} 得到 {0: 0, 1: 0, 2: 0, 3: 0, 4: 0} 我怎样才能在 Dart 中达到同样的效果？到目前为止，我
javascript - 理解 setTimeout
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
makefile - 理解 Makefile
我有以下 make 文件: CC = gcc CCDEPMODE = depmode=gcc3 CFLAGS = -g -O2 -W -Wall -Wno-unused -Wno-multichar
Haskell 理解 fmap
有人可以帮助或指导我如何理解以下实现中的 fmap 函数吗？ data Rose a = a :> [Rose a] deriving (Eq, Show) instance Functor Rose

首页

博学

6Ren·AI

商城

javascript - 尝试理解 Javascript 脚本的执行顺序。尝试过异步、延迟、动态加载脚本，但都有不可预测的结果