关于JS执行顺序的问题

最新推荐文章于 2024-04-29 16:43:19 发布
最新推荐文章于 2024-04-29 16:43:19 发布
阅读量661 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyidong2014/article/details/52764626
版权

在慕课网自由编程时，遇到一个要求：

在网页中插入JS代码，实现输出"JS进阶篇",并弹出对话框，内容为"关注JS高级篇"。

当时首先想到用innerHTML，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们互动下</title>
<script>
    
        var obj = document.getElementById("con");
        obj.innerHTML = "JS进阶篇";
        var a = confirm("关注JS高级篇");
    
    
</script>
</head>
<body>
  <div id = "con">
      
  </div>
 
</body>
</html>


点击运行后却没有任何反应。我郁闷了一阵子后，尝试用按钮的方式实现，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们互动下</title>
<script>
    function btn()
    {
        var obj = document.getElementById("con");
        obj.innerHTML = "JS进阶篇";
        var a = confirm("关注JS高级篇");
    }
        
</script>
</head>
<body>
  <input type = "button" onclick = "btn()">
  <div id = "con">
      
  </div>
  
</body>
</html>

运行后点击按钮就成功了。

成功之余不想就对innerHTML放弃，故找了以前关于innerHTML的代码进行对比，发现了唯一差别就是<script>的位置，忽然想起JS的一个特性：顺序执行。简单地说就是JS代码在网页读取到该语句时就会执行。

我的第一段代码里JS确实执行了，但由于他放在<body>之前，而<body>里已有了<div id = "con"></div>所以依顺序执行的原理，页面上当然什么都不会显示。

不过有个小疑问哈：为什么连对话框都弹不出来呢？

（一般的，<script>如果放在<body>之前，往往用于初始化，比如给页面body设置css等。如果通过事件调用执行的function，那对位置就没有要求了。）


所以，关于innerHTML的代码，可以这么改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们互动下</title>


</head>
<body>
  <div id = "con">
      
  </div>
  <script>
    var obj = document.getElementById("con");
    obj.innerHTML = "JS进阶篇";
    var a = confirm("关注JS高级篇");    
</script>
</body>
</html>

或者用document.write这么改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们互动下</title>
<script>
    document.write("JS进阶篇");  
    alert("关注JS高级篇");
</script>
</head>
<body>
  
</body>
</html>

（就这题目而言，这种写法是最简单的有木有？）


关于对话框弹不出来的问题：

总觉的有点奇葩：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们互动下</title>
<script>
    var obj = document.getElementById("con");
    obj.innerHTML = "JS进阶篇";
    alert("关注JS高级篇"); 
</script>
</head>
<body>
   <div id = "con">
       
   </div>
   
</body>
</html>

这种情况是不会有任何弹框的。

但是把

var obj = document.getElementById("con");
 obj.innerHTML = "JS进阶篇";

换成

document.write("JS进阶篇");

就都能运行。

是语句的问题吗？然而：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们互动下</title>


</head>
<body>
   <div id = "con">
       
   </div>
   <script>
    var obj = document.getElementById("con");
 obj.innerHTML = "JS进阶篇";
    alert("关注JS高级篇"); 
</script>
</body>
</html>

这样移了位置，发现都运行正常了……

囧，感觉位置问题能影响不少代码的运行啊，虽然还没完全弄懂怎么回事，不过下次一定要注意位置问题了，orz

茶上月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS执行顺序问题
Drift King 的博客
12-05 293
今天，写业务代码的时候突然发现了js执行顺序的问题，就网上查了下资料，自己整理了下，列了出来。原来自己之前都没有在意过。（要对代码怀着敬畏之心啊） 一、JS——&gt;单线程 严格意义上来说，javascript没有多线程的概念，所有的程序都是单线程依次执行的。 什么是单线程 通俗点说，就是代码在执行过程中，另一段代码想要执行就必须等当前代码执行完成后才可以进行。我们拿一段代码来解释一下吧。...
js 程序执行与顺序实现详解
10-27
JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行，浏览器对于不同的方式有不同的解析顺序，详细介绍如下，感兴趣的朋友可以参考下哈
JavaScript程序执行顺序问题总结
hitman9099的BLOG
09-14 5226
JavaScript程序 执行顺序问题总结
如何解决JS执行时间过长导致页面卡顿
热门推荐
weixin_43589827的博客
01-14 1万+
背景 众所周知，JavaScript（简称 JS） 是单线程语言，浏览器只分配给 JS 一个主线程，每次从任务队列中执行一个任务，直到任务队列为空为止。这就必然会导致一些浏览器出现卡顿的问题，例如这次后端反馈，在文件上传的任务中，JS需要切割文件，分片上传给服务器，但遇到大型文件（几百G）的时候，则需分片几十万份，然后把这些分片逐步上传给服务器。我猜测是因为这个过程 JS 处理这些文件片段时间稍长，导致页面渲染 fps 低，所以才出现页面卡顿的现象。所以我就开始想，在面对这种因JS执行时间长，导致页面卡顿的
js执行顺序
最新发布
weixin_45392204的博客
04-29 431
同步任务：指的是在主线程上排队执行的任务，只有当前一个任务执行完毕，才能执行下一个任务（按照顺序执行）异步任务：指的是不进入主线程上的任务，进入任务队列的任务，只有当任务队列通知主线程某个异步任务可以执行，方可进入主线程进行执行。异步任务又分宏任务跟微任务宏任务：异步ajax请求、setTimeout、setInterval、文件操作、其他微任务：Promise.then、.catch 和.finally，process.nextTick、其他。
js执行顺序问题
I_take_you_to_fly的博客
04-06 362
js代码是一段一段执行的，定义式函数被优先执行。看代码： var a =2; //1.覆盖 function f2(){ alert(1) } f2(); function f2(){ alert(2); } f2(); <!-- var a =2; //2.不覆盖 function f2(){ alert(1) } f2();
js中的事件执行顺序梳理
WANG944282的博客
04-18 8141
js的事件执行顺序梳理
JavaScript 程序执行顺序问题总结
10-28
JavaScript 程序执行顺序是JavaScript编程中至关重要的概念，它涉及到变量声明、函数定义、代码块处理以及事件处理等方面。下面将详细解释这些知识点。 1. 变量的声明和引用 在JavaScript中，变量必须先声明后使用...
JavaScript代码执行的先后顺序问题
10-19
今天就给大家介绍一个特别基础的东西，javascript中函数的一点儿小知识之js代码的执行顺序问题，需要的朋友参考下吧
探析浏览器执行JavaScript脚本加载与代码执行顺序
10-22
以一个示例来解释脚本执行顺序，我们可以考虑两个JavaScript文件（1.js和2.js）的加载。当这两个文件通过`<script>`标签按顺序引入时，无论它们是否并行下载，1.js总是在2.js之前执行。这可以通过延迟发送文件内容的...
html中嵌入js执行顺序_html中嵌入js执行顺序_
10-03
总结来说，理解HTML中嵌入JavaScript的执行顺序是至关重要的，它可以帮助我们优化代码结构，提高网页性能，并避免因脚本执行时机不当导致的问题。在实际开发中，应合理利用`async`、`defer`等特性，以及模块化加载...
js【深度解析】代码的执行顺序
朝阳39的博客
03-09 1230
我们将每一句要执行的 js 代码当做一个任务，则 js 代码可以按照其执行方式的不同，按下图分类微任务：被放入微任务队列（micro task queue）中等待执行的代码因为Promise、async 、await 都是 ES6 语法定义的宏任务：被放入 Web APIs 中等待执行的代码因为 setTimeout 、setInterval 都是浏览器定义的。
JavaScript执行顺序总结
qq_41872385的博客
03-11 4446
js的执行顺序
event loop 事件轮询机制
一心向学
03-21 629
1，event loop（事件轮询/事件循环） 首先我们要知道 由于js是单线程的脚本，异步事件要基于回调来实现的 而event loop 就是异步回调的实现原理 1，js的执行顺序 从前到后，一行一行执行 如果有一行执行报错，就会停止下面代码的执行 先执行同步代码，后执行异步 举个例子 这上面是一个js执行顺序的小案例 上面是浏览器运行 首先运行第一行代码，显示console.log(‘Hi’)，然后清空调用栈。 然后调用函数，函数会进入异步函数队列中 最后执行log代码，然后清空 然后
JavaScript 执行顺序梳理 ， 建议收藏！
Jack, what else can you do besides holding your little darling?
10-19 1400
一.概念 1.解释型语言执行步骤 预编译 扫描上下文。扫描错误 函数和变量声明的提升 解释执行 一条一条执行代码 2.任务队列event queue ????异步任务进入event queue任务队列 所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务
js的执行顺序
smallNut的博客
02-16 3178
JS的运行机制 先来一个今日头条的面试题 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.l
js代码执行顺序简单介绍,详细说明js的执行过程
chatgpt002的博客
11-13 86
v8引擎工作原理：Parser：负责将JavaScript源码转换为Abstract Syntax Tree (AST)；如果函数没有被调用，那么是不会被转换成AST的Ignition：interpreter，即解释器，负责将AST转换为Bytecode，解释执行Bytecode；同时收集TurboFan优化编译所需的信息，比如函数参数的类型，有了类型才能进行真实的运算；如果函数只调用一次，Ignition会执行解释执行ByteCode解释器也有解释执行bytecode的能力。
JavaScript/ES6：代码执行顺序/从上到下的顺序依次执行/promise/async await
snowball的博客
05-05 1064
待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 Promise ，以便在未来某个时候把值交给使用者。Promise将异步执行的程序变成同步执行，所谓的在开发中解决回调嵌套的问题。
js setInterval 和 promise 执行顺序问题
09-01
在JavaScript中，setInterval和Promise的执行顺序是根据事件循环机制来确定的。事件循环是JavaScript用来处理异步操作的一种机制。首先，让我们来了解一下事件循环的基本原理。 JavaScript是单线程执行的，意味着同时只能执行一段代码。当某一段代码正在执行时，其他任务必须等待。这种执行方式也被称为"阻塞式执行"。JavaScript中的任务队列用于存储等待执行的任务。一旦当前任务执行完毕，事件循环会从任务队列中取出下一个任务并执行。 对于setInterval和Promise的执行顺序问题，具体的执行顺序取决于它们被添加到任务队列的时间和优先级。根据引用的说明，事件循环的优先级从高到低依次是：主代码块 > setImmediate > MessageChannel > setTimeout / setInterval。 如果存在多个setInterval和Promise任务，它们会根据优先级和添加到任务队列的顺序依次执行。setInterval的任务会按照指定的时间间隔重复执行，而Promise的任务则会在其他任务执行完毕后被执行。 需要注意的是，Promise中的then方法是异步执行的，它会在当前任务执行完毕后被添加到任务队列中，等待执行。因此，即使是在Promise的then方法中使用了setTimeout，它也会按照任务队列的顺序被执行。具体的执行顺序可能因为任务队列中的任务数量和优先级而有所不同。 综上所述，setInterval和Promise的执行顺序是根据它们被添加到任务队列的时间和优先级来确定的。具体的执行顺序可以通过事件循环机制来理解。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [js 关于setTimeout和Promise执行顺序问题](https://blog.csdn.net/zlzbt/article/details/100577954)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [JavaScript--Promise执行顺序](https://blog.csdn.net/qq_45633813/article/details/126781947)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值