精华内容
下载资源
问答
  • 网上关于JavaScript中setTimeout的文章很,但总感觉例子不够直接具体,因此写了简单的例子并加以解释希望能让大家明白setTimeout是如何执行的。实例代码如下: var time1=new Date().getTime(); console.log(1...
        

    网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的。
    实例代码如下:

        var time1=new Date().getTime();
        console.log(1,time1);
        setTimeout(function(){
            var time4=new Date().getTime();
            console.log(4,time4);
            for(var a=0;a<10000000000;a++){
                a=a+1;
            }
            var time2=new Date().getTime();
            console.log(2,time2);
        },2000);
    
        setTimeout(function(){
            var time3=new Date().getTime();
            console.log(3,time3);
        },1000);
        setTimeout(function(){
            var time5=new Date().getTime();
            console.log(5,time5);
        },3000);
        setTimeout(function(){
            var time6=new Date().getTime();
            console.log(6,time6);
        },14000);

    代码十分简单,想必大家都能看懂,执行结果如下:

    clipboard.png

    解释:setTimeout属于异步执行函数,当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列,等待当前主程序执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列~~~

    那么这些队列里的函数谁先执行呢?就是根据setTimeout里的第二个参数(延迟时间)决定的,例如            
        setTimeout(function(){
            var time3=new Date().getTime();
            console.log(3,time3);
        },1000);

    那么主程序执行完成以后的1000ms后就会执行这段代码,如果延迟时间为2000,那么主程序执行完成后2000ms就会执行这段代码,只需记住一点:延迟时间始终是相对主程序执行完毕的那个时间算的 ,并且多个setTimeout的先后顺序也是由这个延迟时间决定的,如果遇到某个setTimeout需要花费大量的时间怎么办?可以参照上图里执行结果的数字2和数字5对应的时间,由于js是单线程,所以当执行到这个setTimeout后,会将这个程序执行完成后再去执行下一个setTimeout,无论下一个setTimeout的延迟时间为多少,如果这两个setTimeout时间的差值小于第一个setTimeout消耗的时间,程序会等待这个setTimeout执行完成后立即执行下一个setTimeout,如果差值大于消耗的时间,就按照和主程序约定的延迟(setTimeout里的第二个参数)执行即可

    展开全文
  • 看一段代码: for(var i=1;i<=5;i++){ (function(){ var j=i;... setTimeout(function timer(){ console.log(j); },j*1000); })(); } for(var i=1;i<=5;i++){ (function(j){ se...

    看一段代码:

    for(var i=1;i<=5;i++){
        (function(){
        var j=i;
        setTimeout(function timer(){
        console.log(j);
        },j*1000);
        })();
       
     }
    for(var i=1;i<=5;i++){
        (function(j){
        setTimeout(function timer(){
        console.log(j);
        },j*1000);
        })(i);
       
    }
    for(var i=1;i<=5;i++){
        let j=i;
        setTimeout(function timer(){
        console.log(j);
        },j*1000);
       
    }
    for(let i=1;i<=5;i++){
        setTimeout(function timer(){
        console.log(i);
        },i*1000);
       
    }

    这段代码执行后的结果是什么?

    要弄清楚这个问题,先要明白js的事件循环机制。首先参考HTML规范中的一段话:

    为了协调事件(event),用户交互(user interaction),脚本(script),渲染(rendering),网络(networking)等,用户代理(user agent)必须使用事件循环(event loops)。有两类事件循环:一种针对浏览上下文(browsing context),还有一种针对worker(web worker)

    事件循环的描述如下:

    一个事件循环有一个或者多个任务队列(task queues)。任务队列是task的有序列表,这些task是以下工作的对应算法:Events,Parsing,Callbacks,Using a resource(使用资源),Reacting to DOM manipulation(响应DOM)。

    每一个任务都来自一个特定的任务源(task source)。所有来自一个特定任务源并且属于特定事件循环的任务,通常必须被加入到同一个任务队列中,但是来自不同任务源的任务可能会放在不同的任务队列中

    举个例子,用户代理有一个处理鼠标和键盘事件的任务队列。用户代理可以给这个队列比其他队列多3/4的执行时间,以确保交互的响应而不让其他任务队列饿死(starving),并且不会乱序处理任何一个任务队列的事件。

    每个事件循环都有一个进入microtask(微任务)检查点(performing a microtask checkpoint)的flag标志,这个标志初始为false。它被用来组织反复调用‘进入microtask检查点’的算法。

    我们可以看出,任务队列在事件循环中的作用非常重要,那么,我们以将任务队列的执行机制稍作介绍:

    待任务可以分为同步任务和异步任务:

    同步任务:即立即执行的任务,同步任务一般会直接进入到主线程中执行;

    异步任务,即异步执行的任务,例如setTimeout 定时函数,网络请求等都属于异步任务,异步任务会通过任务队列进行管理。

    同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入 任务队列 。主线程内的任务执行完毕为空,会去 Event Queue 读取对应的任务,推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

    基于以上的机制,我们来分析上面的代码:

    代码中是五个异步任务,没有同步任务,因此都进入异步队列,再以先进入先出的顺序执行,我猜测运行结果是顺序输出4个“1 2 3 4 5”串:即

    1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 

    但是,结果不是这样!而是:

    1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 5 5 5 5

    即先输出4个1,再输出4个2,以此类推;

    Why?!!

    关于这个问题,我暂时没有想清楚,先记录下来。

    引用文章:https://segmentfault.com/a/1190000010622146https://www.cnblogs.com/yugege/p/9598265.html

     

     

     

     

     

     

    展开全文
  • 做了一试验,测试能否在另外的setTimeout中中断其他代码的执行。结果表明,是不可能的,Actionscript会按顺序,逐个逐个的执行。 private var index:int; private var stop:Boolean = false; public ...
    做了一个试验,测试能否在另外的setTimeout中中断其他代码的执行。结果表明,是不可能的,Actionscript会按顺序,逐个逐个的执行。

    private var index:int;
    private var stop:Boolean = false;
    
    public function EffectTest()
    {
           setTimeout(run, 200);
           setTimeout( function():void
           {
                   trace("try to terminate running");
                  stop = true;
           }, 500);
           setTimeout( function():void
           {
                   trace("index is", index);
           }, 600);
    }
    
    protected function run(): void
    {
            //this loop needs 1.3s to finish
            for (var i:int = 0; i < 10000000; i++)
           {
                   if (stop)
                  {
                         index = i;
                          trace("running has been terminated");
                          return;
                  }
                   var a:Number = Math.sqrt(i);
           }
           index = i;
            trace("finish running");
    }

     




    如果第二个setTimeout能中止的话,应该输出running has been terminated

    但实际运行结果,这部分是没有执行的。run函数还是好好的完全被执行完。
    最终输出:
    finish running
    try to terminate running
    index is 10000000

    转载于:https://www.cnblogs.com/kenkofox/p/3197862.html

    展开全文
  • 关于javascript的运行机制大家都应该有所了解了吧,其实javascript是一单线程的机制,但是因为...下面这篇文章通过实例主要给大家介绍了关于JavaScript中setTimeout函数执行顺序的相关资料,需要的朋友可以参考下。
  • 多个异步执行顺序

    2020-06-03 18:20:13
    console.log('代码执行开始'); setTimeout(()=>{console.log(2);},2000); setTimeout(()=>{console.log(0);}); console.log('代码执行结束'); 执行结果: 代码执行开始 代码执行结束 0 (等待两秒后执行) 2
    console.log('代码执行开始');
    setTimeout(()=>{console.log(2);},2000);
    setTimeout(()=>{console.log(0);});
    console.log('代码执行结束');
    
    执行结果:
    代码执行开始
    代码执行结束
    0
    (等待两秒后执行)
    2
    
    展开全文
  • 异步任务三、Event Loop三、定时器四、宏任务和微任务setTimeout async promise执行顺序总结总结 一、JavaScript是单线程语言 与用途有关,与用户进行互动,如操作DOM节点,在一时间段内只能干一件事。 利用多核...
  • 一、微任务与宏任务执行顺序 微任务队列只有一个,宏任务队列可以有多个。 宏任务包括:script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering 微任务包括: new Promise().then(回调), ...
  • promise.then VS setTimeout  在chrome和node环境环境中均输出2, 3, 1... 原因: 有一个事件循环,但是任务队列可以有多个。 整个script代码,放在了macrotask queue中,setTimeout也放入macrotask queue。 ...
  • 我们知道JS是单线程脚步语言,设计为单线程是有好处的,如果为线程,当两人同时操作了同一资源,这样会造成同步问题,不知以谁为准。 同时,单线程也存在一些问题,比如: for(var i = 0;i<1000;i++){ ...
  • 假如有两线程,其中一线程想要添加一节点,而另一线程则想要删除一节点.如果这两线程同时运行,那么结果势必会导致混乱,所以JavaScript是一门单线程的语言. 同步和异步 JavaScript虽然是单线程的,但是也是...
  • 都说JS是单线程异步机制,一段代码执行完成后才能执行下一段代码,比如说两个settimeout函数。 但是为什么nodejs里的fs.readfile同时异步读取多个文件的时候,会出现小文件先读完啊,难道不应该按照进入队列顺序来吗...
  • 问题:多个延时器顺序执行,依次打印 function a() { setTimeout(() => { console.log(1) }, 200) } function b() { setTimeout(() => { console.log(2) }, 10) } function c() { setTimeout(() =&...
  • 『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易...这问题是有关执行顺序和Event Loop的。关于Event Loop和任务队列等概念,可以先阅读我引用中的文章,本文主要分析一些存在...
  • 多个请求,调用按照顺序执行

    千次阅读 2020-04-29 09:41:24
    相信大家都会遇到一种情况,多个请求并发执行,但现在的需求是要在一个请求或多个请求之后再调用某一个未知函数,这就需要用到es6的Promise对象和async函数了 //模拟ajax异步操作1 function ajax1() { const p = ...
  • 仅仅作为工作之余的一点学习整理,在实际业务开发场景,经常需要用到请求顺序执行的情况,比如界面回显的一些多级联动,稍微记录一下相关方式1.简单粗暴(直接调用)function setp1() { setTimeout(() => { ...
  • 应用场景决定了javascript的单线程的特性,假如javascript是线程,同时进行:一线程对某一dom进行添加属性操作,另一线程对该线程进行删除操作,那么浏览器该听哪一。这就决定javascript必须是单线程。 ...
  • 如果多个promise逻辑一样,可以这样写哦 var list = [1,2,3,4,5]; //先定义一个promise 的公共方法 function myPromise(item){ return new Promise((resolve, reject) => { setTimeout(() => resolve(item...
  • function sleep(delay){ return function(){ return new Promise(function(resolve, reject){ setTimeout(resolve, delay); }); } } ...
  • javascript执行顺序轻解

    2021-01-18 22:34:15
    同步任务优先执行执行结束后执行异步任务,然后在执行下一同步周而复始。 setTimeout 1.仅仅是在所规定的时间后将其任务放入队列,依旧会等待同步任务执行 2.HTML标准定时器内最低是4毫秒,写0也是4,类似字体...
  • 执行顺序 js执行过程中,先执行栈中的代码,碰到DOM事件回调函数、异步http请求、setTimeout、setInterval放到事件队列里。等栈中的代码执行完,执行微任务队列里的回调函数。最后才执行队列里的代码。微任务和宏...
  • js执行代码顺序

    2019-05-15 17:10:00
    之前一直停留在主线程先执行,异步后执行的浅理解中,后来随着不断的学习,才渐渐意识到这里面还是有点复杂的,不过我不打算写很。一幅图来说明这复杂的关系 processTick可理解为node中的延时器。 接下来看...
  • 例子1.Promise.all 并行执行promisegetA和getB并行执行,然后输出结果。如果有一错误,就抛出错误/** * 每一promise都必须返回resolve结果才正确 * 每一promise都不处理错误 */ const getA = new Promise...
  • 6. Promise 2: 微任务队列和任务执行顺序1.Promise有个微任务队列,轮询到执行的时候,就会从队列中调出任务,放在主线程执行。2. 队列中微任务可以多个3. 宏任务,最后执行(setTimeout)格式:newPromise(主任务)....
  • 当需要多个异步函数按顺序执行时,可以使用回调函数: 具体方法: 1 定义函数时,定义一个callback形参变量,在函数内部,当最后一句话执行时,自动调用callback(): 这里是用一个接力赛跑举例: function fn1...
  • 1.JavaScript是单线程的却能让AJAX异步发送和回调请求,setTimeout(func, 0)它的用处有三: 让浏览器渲染当前的变化(很浏览器UI ...改变执行顺序 2.浏览器不是单线程的.虽然JS运行在浏览器中,是单线程的...
  • 浅析setTimeout与Promise

    2018-08-31 02:35:40
    正好在Stackoverflow上回答了一关于setTimeout与Promise执行顺序相关的问题,于是总结这一知识点,与更读者分享,同时完善JavaScript异步编程系列文章。前言我们先看一到常见的前端面试题:var p1 = new Promise...
  • 浏览器引擎按顺序执行程序,遇到setTimeout会将func函数放到执行队列中,等到主程序执行完毕之后,才开始从执行队列(队列中可能有多个执行的func函数)中按照time延时时间的先后顺序取出来func并执行。...

空空如也

空空如也

1 2 3 4 5 6
收藏数 110
精华内容 44
关键字:

多个settimeout执行顺序