js延迟1秒往下执行_这一次，彻底弄懂 JavaScript 执行机制（别还不知道什么是宏任务，什么是微任务）...

最新推荐文章于 2024-07-02 17:59:10 发布
最新推荐文章于 2024-07-02 17:59:10 发布
阅读量2.5w 收藏 14
点赞数 1
文章标签： js延迟1秒往下执行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_26879037/article/details/113085334
版权
本文详细解析了JavaScript的执行机制，包括同步任务、异步任务、事件循环(Event Loop)、setTimeout和setInterval的工作原理，以及Promise和process.nextTick在宏任务与微任务中的角色。通过实例阐述了JavaScript如何处理异步操作，帮助读者深入理解JavaScript的执行流程。
摘要由CSDN通过智能技术生成
     本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：
  • javascript是按照语句出现的顺序执行的
看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的：
a33a185e123a97bf4aa2b5969ccdd026.png
5107fc3a19da479ad17e63a2144b093a.pngimage.png然而实际上js是这样的： c7fa26207156fbce8cec0bc7f4c66d0c.png                                         185af89c9c77faab258eb1d21e4f4ab5.png依照 js是按照语句出现的顺序执行这个理念，我自信的写下输出结果： 
//"定时器开始啦"
//"马上执行for循环啦"
//"执行then函数啦"
//"代码执行结束"复制代码
去chrome上验证下，结果完全不对，瞬间懵了，说好的一行一行执行的呢？ 1797f8b131cab57869f272e88766170d.png    我们真的要彻底弄明白javascript的执行机制了。

1.关于javascript

    javascript是一门 单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！

2.javascript事件循环

    既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类：
  • 同步任务
  • 异步任务
    当我们打开网站时，网页的渲染过程就是一大堆同步任务，比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务，就是异步任务。关于这部分有严格的文字定义，但本文的目的是用最小的学习成本彻底弄懂执行机制，所以我们用导图来说明： 439ec7622f58b86c370e0842d97956f6.png 导图要表达的内容用
最低0.47元/天 解锁文章
白萝卜道士
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中sleep()函数的实现及应用
Jerry学长
05-31 1051
通过上述不同的方法，我们可以在JavaScript中模拟实现sleep功能。对于大多数应用场景，推荐使用Promise和async/await方法，因为它既实现了延时效果，又不会阻塞线程。在处理需要多重回调的代码时，可以考虑将逻辑拆分为多个函数，并使用setTimeout进行串行调用。在服务器端的特殊需求下，可以使用同步等待模块，但需谨慎对待性能问题。在高精度计时需求下，可以考虑使用Atomics.wait方法，但要限定在Node.js环境中使用。
javascript延时执行跳转或执行函数
07-12
延时执行跳转或执行函数 url可以为地址或者定义好的javascript/jquery函数, 定义每次延时时间和延时次数, callback是每次延时可以执行的回调函数
js每1秒重复执行一段代码
最新发布
qq_33240556的博客
07-02 537
函数代表你希望每秒执行的任务，你可以根据需要修改这个函数内部的逻辑。在JavaScript中，要实现每1秒重复执行一段代码，可以利用。函数，我们将这个函数的执行间隔设置为了1000毫秒（1秒）。会返回一个ID，用于后续如果需要停止定时执行时，传递给。
js延迟1秒钟
weixin_42596011的博客
01-14 6677
使用 JavaScript 的 setTimeout() 函数可以实现延迟 1 秒钟执行某个函数。 setTimeout(function(){ // your code here }, 1000); 第一个参数是要执行的函数，第二个参数是延迟的时间，单位是毫秒，所以上面的代码延迟了 1 秒钟才执行。 ...
js延迟1秒钟 同步执行
weixin_42600128的博客
01-14 7433
可以使用 JavaScript 中的 setTimeout() 函数来延迟 1 秒钟执行代码。示例： setTimeout(function() { console.log("延迟 1 秒钟执行的代码"); }, 1000); 其中，第一个参数是要执行的函数，第二个参数是延迟的时间(单位为毫秒)。 ...
js 延迟几秒执行_深入研究 Node.js 的回调队列
weixin_39630126的博客
12-03 249
队列是 Node.js 中用于有效处理异步操作的一项重要技术。在本文中，我们将深入研究 Node.js 中的队列：它们是什么，它们如何工作（通过事件循环）以及它们的类型。Node.js 中的队列是什么？队列是 Node.js 中用于组织异步操作的数据结构。这些操作以不同的形式存在，包括HTTP请求、读取或写入文件操作、流等。在 Node.js 中处理异步操作非常具有挑战性。HTTP 请求期间可能会...
js在浏览器和node中的解析机制-Event Loop
evalost的博客
06-30 247
事件流 DOM0事件 DOM2事件
彻底弄懂 JavaScript 执行机制
10-17
不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和...接下来通过本文给大家分享 JavaScript 执行机制，感兴趣的朋友一起看看吧
为什么说JavaScript预解释是一种毫无节操的机制详析
10-17
JavaScript是一种解释型语言，它的执行过程分为编译阶段和执行阶段。在编译阶段，JavaScript解释器会进行所谓的“预解释”或“预处理”，这是一个关键特性，但也因此被一些人批评为“毫无节操”。预解释主要是为了...
一篇文章弄懂javascript中的执行栈与执行上下文
10-16
在学习JavaScript的过程中，理解和掌握执行栈与执行上下文是相当重要的，因为它们是理解JS运行机制的核心。执行栈是JavaScript引擎用来追踪函数调用的一种数据结构，而执行上下文则是JS代码执行的环境。下面将详细...
详解JavaScript 的执行机制
10-14
在一次事件循环中，执行栈会首先执行完所有的宏任务，然后执行所有的微任务，接着再进行下一个循环。 setTimeout和setInterval是JavaScript中处理定时任务的两个函数。setTimeout用于延迟执行一次回调函数，...
JS延迟加载(setTimeout) JS最后加载
12-11
第一 JS延迟加载 代码如下: [removed][removed] [removed] setTimeout(“document.getElementById(‘my’).src=’include/common.php’; “,3000);//延时3秒 [removed] 一般情况下都是利用setTimeout来实现 第二 JS最后加载 在需要插入JS的地方插入以下代码: 代码如下: <SPAN id=L4EVER>LOADING…</SPAN> 当然，那个LOADING…你可以换成自己喜欢的小图片
浅谈js中的延迟执行和定时执行
11-26
在js中，延迟执行函数有两种，setTimeout和setInterval，用法如下： function testFunction(){Console.log('hovertree.com');} setTimeout("testFunction()","6000"); //6000毫秒后执行testFunction()函数，只执行一次。 setInterval("testFunction()","6000");//每隔6000毫秒执行一次testFunction()函数，执行无数次。 varinterval = window.setInterval("testFunction()","6
js代码延迟一定时间后执行一个函数的实例
10-20
下面小编就为大家带来一篇js代码延迟一定时间后执行一个函数的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js函数setTimeout延迟执行的简单介绍
11-30
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。　　语法:　　setTimeout(code,millisec)　　参数：　　code （必需）：要调用的函数后要执行的 JavaScript 代码串。　　millisec（必需）：在执行代码前需等待的毫秒数。　　提示：　　setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。实例： 代码如下:　function timedMsg()　　{　　var t=setTimeout(“alert(‘5 seconds!’)”
关于vue.js中实现方法内某些代码延时执行
12-13
今天在工作时遇见了某些代码需要延时操作的情况。具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后，grid内数据能够及时更新以便显示增删改操作后的数据。这里的话使用的是vue.js中的setTimeout函数来解决该问题。 代码如下： var that = this; setTimeout(function () { that.modifyDialogVisible = false; grid.api.reloadData(); },500); 值得注意的是这里在setTimeout函数如果使用到了this，必须在函数外定义一个变量来暂存this。
js的setInterval 会延迟一秒解决的最佳实践
weixin_41858523的博客
11-24 1251
countDown 这个函数作为定时调用的函数，通过在setInterval之后去执行原函数解决延时一秒调用的问题。但是会出现时灵时不灵的问题，通过将去掉毫秒数的方法。，最终实现完整倒计时解决；
js array formdata_如何理解JS的单线程？
weixin_39611765的博客
10-25 217
JS本质是单线程的。也就是说，它并不能像JAVA语言那样，两个线程并发执行。但我们平时看到的JS，分明是可以同时运作很多任务的，这又是怎么回事呢？首先，JS的代码，大致分为两类，同步代码和异步代码。console这是典型的同步代码，编写顺序就是执行顺序。JS引擎的主线程负责执行代码，由于只有这一个线程，执行当然是同步的，即按照顺序来。另外，还有一个叫做任务队列的东西，所有的异步代码都是从队列当中来...
好程序员web前端分享如何理解JS单线程
weixin_33923148的博客
04-26 216
好程序员web前端分享如何理解JS单线程，JS本质是单线程的。也就是说，它并不能像JAVA语言那样，两个线程并发执行。但我们平时看到的JS，分明是可以同时运作很多任务的，这又是怎么回事呢？首先，JS的代码，大致分为两类，同步代码和异步代码。console.log(1)console.log(2)console.log(3)这是典型的同步代码，编写顺序就是执行顺序。JS引擎的主...
js延迟1秒往下执行
05-30
可以使用JavaScript中的setTimeout()函数来实现延迟执行的效果。例如，要延迟1秒后执行某个函数，可以使用以下代码： ``` setTimeout(function() { // 这里放需要延迟执行的代码 }, 1000); // 延迟1秒，单位为毫秒 ``` 在上述代码中，setTimeout()函数接受两个参数：第一个参数是一个匿名函数，里面放需要延迟执行的代码；第二个参数是延迟的时间，以毫秒为单位。在这个例子中，我们将延迟的时间设置为1000毫秒（即1秒钟），所以代码会在1秒后执行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值