精华内容
下载资源
问答
  • 1.关于javaacriptjavascript是一门单线程语言,所以javascript是按语句的执行顺序执行的。虽然js是单线程,但是我们可以将任务分成两类1.同步任务:需要执行的任务在主线程上排队,一次执行2.异步任务:没有立马执行...

    1.关于javaacript

    javascript是一门单线程语言,所以javascript是按语句的执行顺序执行的。

    虽然js是单线程,但是我们可以将任务分成两类

    1.同步任务:需要执行的任务在主线程上排队,一次执行

    2.异步任务:没有立马执行但是需要被执行的任务,放在 任务队列里面,

    2.javascript事件循环

    当我们打开网站的时候,网页的渲染其实是一堆同步任务,不如页面骨架和页面元素的渲染,但是想图片音乐等占用资源大耗时久的任务就是异步任务,

    异步执行:

    1.所有同步任务偶在主线程上执行,形成一个很执行栈

    2.主线程之外,还存在一个任务队列(task queue)只要异步任务有了运行结果,就在“任务队列”之中放置一个事件。

    3.一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,看看里面有哪些事件。那些对应的异步任务,就结束等待状态,进入执行栈开始被执行。

    4.主线程不断重复以上三步。

    js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。

    ![N]M]_N{OL(HBZ`B89REKMQ9.png](https://upload-images.jianshu.io/upload_images/9374643-598ff6c029970ff9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    同步和异步分别进入到不同的执行场所,同步进入到主线程,异步的进入到event table 并注册函数

    当指定事件完成之后,event table 会将函数移入到event queue

    当主线程的任务执行完毕之后,会把event queue里面读取对应的函数进入主线程执行

    上述过程会不断循环,形成event loop(事件循环)

    3.setTimeout

    在使用setTimeout的时候,经常会发现设定的时间与自己设定的时间有差异,贴段代码看一下

    setTimeout(() => {

    task();

    },3000)

    console.log('执行console');

    // 执行console

    // task()

    上文所说的setTimeout是一个异步的所以会先执行console这个同步任务

    但是,如果改成下面这段会发现执行时间远远超过预定的时间

    setTimeout(() => {

    task()

    },3000)

    sleep(10000000)

    这是为啥??

    我们来看一下是怎么执行的:

    task()进入到event table里面注册计时

    然后主线程执行sleep函数,但是非常慢。计时任然在继续

    3秒到了。task()进入event queue 但是主线程依旧没有走完

    终于过了10000000ms之后主线程走完了,task()进入到主线程

    所以可以看出其真实的时间是远远大于3秒的

    还会遇到一种情况,就是setTimeout(fn(),0),这样的代码其含义主要是在这个任务会在主线程最早可得的空闲时间执行,换句话说就是主线程的任务执行结束之后立马执行

    console.log('先执行这里');

    setTimeout(() => {

    console.log('执行啦')

    },0);

    // 先执行这里

    // 执行啦

    HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。另外,对于那些DOM的变动(尤其是涉及页面重新渲染的部分),通常不会立即执行,而是每16毫秒执行一次。

    4.promise 和 process.nextTick(callback)

    process.nextTick(callback)类似node.js版的"setTimeout",在事件循环的下一次循环中调用 callback 回调函数。

    除了广义的同步任务和异步任务,我们可以分的更加精细一点:

    macro-task(宏任务):包括整体代码script,setTimeout,setInterval

    micro-task(微任务):Promise,process.nextTick

    不同的任务会进入到不同的event queue。比如setTimeout和setInterval会进入相同的Event Queue。

    事件循环,宏任务,微任务的关系图

    不哔哔,搞段代码瞅瞅:

    setTimeout(function() {

    console.log('setTimeout');

    })

    new Promise(function(resolve) {

    console.log('promise');

    resolve(true)

    }).then(function() {

    console.log('then');

    })

    console.log('console');

    // promise

    // console

    // then

    // setTimeout

    首先会遇到setTimeout,将其放到红任务event queue里面

    然后回到 promise , new promise 会立即执行, then会分发到微任务

    遇到 console 立即执行

    整体宏任务执行完成,接下来判断是否有微任务

    ,刚刚放到微任务里面的then,执行

    ok,第一轮事件结束,进行第二轮,刚刚我们放在event queue 的setTimeout 函数进入到宏任务,立即执行

    结束

    终于结束了,我们来贴段巨复杂的代码搞一搞

    console.log('1');

    setTimeout(function() {

    console.log('2');

    process.nextTick(function() {

    console.log('3');

    })

    new Promise(function(resolve) {

    console.log('4');

    resolve();

    }).then(function() {

    console.log('5')

    })

    })

    process.nextTick(function() {

    console.log('6');

    })

    new Promise(function(resolve) {

    console.log('7');

    resolve();

    }).then(function() {

    console.log('8')

    })

    setTimeout(function() {

    console.log('9');

    process.nextTick(function() {

    console.log('10');

    })

    new Promise(function(resolve) {

    console.log('11');

    resolve();

    }).then(function() {

    console.log('12')

    })

    })

    // 1,7,6,8,2,4,3,5,9,11,10,12

    惊不惊喜,意不意外

    我们来分析一下

    首先先执行console.log(1) 然后将setTimeout放到宏任务event queue里面 记作 setTimeout 1 ,接着 看到 process.nextTick ,将其放到微任务里面 ,记作 process 1,然后 看到new promise 立即执行输出9 ,将里面的then 放到 微任务里面 记作 then 2, 继续,遇到 setTimeout 放到宏任务里面记作 setTimeout 2 。目前输出的是:1,7,

    OK, 接下来,开始判断是否有微任务,刚刚放入到微任务event queue的进入到主程序开始执行,process 1 , then 2 目前输出的是:6,8、

    接下来,微任务的event queue 空了,进行下一轮事件,将刚刚放到宏任务的 setTimeout 1 进入到主线程

    遇到 console 立即执行, 遇到 process.nextTick 放到微任务 event queue 里面 记作 process1, 接着遇到 new Promise 立即执行, 将 then 放到event queue 里面 记作 then 2,OK,当前宏任务里的任务执行完了,判断是否有微任务,发现有 process1, then 2 两个微任务 , 一次执行 目前输出的是:2,4,3,5、

    目前主线程里的任务都执行结束了,又开始第三轮事件循环,同上(字太多,省略。。。。) 目前输出的是:9,11,10,12、

    注意: 以上所说只能是在浏览器中的执行顺序,

    5.node.js的Event Loop

    Node.js也是单线程的Event Loop,但是它的运行机制不同于浏览器环境。浏览器的Event loop是在HTML5中定义的规范,而node中则由libuv库实现。

    node.js运行机制

    1.v8引擎解析JavaScript脚本。

    2.解析后的代码,调用Node API。

    3.libuv库负责Node API的执行。它将不同的任务分配给不同的线程,形成一个Event Loop(事件循环),以异步的方式将任务的执行结果返回给V8引擎。

    4.V8引擎再将结果返回给用户。

    展开全文
  • 看起来的执行顺序: 第1次点击事件主体,设置setTimeout 第1次点击的setTimeout内函数。(应该是主体代码执行较快,第二次点击还未发生) 第2次点击事件主体,设置setTimeout(应该是:第一次的setTimeout还未执行...

    code:

    // 左侧菜单树操作
    var isClick = false;
    var i = 0;
    $('.open_all').click(function () {
        i++;
        console.log("click"+i+":"+Date.parse(new Date()));
        if (isClick) {
            console.log("点击过快"+isClick);
            larryms.msg("点击过快",{time:500});
            return;
        }
        console.log(i+"准备开始执行");
        isClick = true;
        var this_node = $(this);
        setTimeout(function() {
            console.log("start"+i+":"+Date.parse(new Date())+isClick);
            // 以下代码在数据量为1000多时,会执行较长时间
            if (this_node.hasClass('close_all')) {
                leftMenuTree.jstree().close_all();
                this_node.removeClass('close_all').text('展开菜单树');
            } else {
                this_node.addClass('close_all').text('折叠菜单树');
                leftMenuTree.jstree().open_all();
            }
    
            isClick = false;
            console.log("end:"+Date.parse(new Date())+isClick);
        }, 0);
    });
    

    打印结果:
    在这里插入图片描述

    操作:连续点击8次。

    看起来的执行顺序:

    1. 第1次点击事件主体,设置setTimeout
    2. 第1次点击的setTimeout内函数。(应该是主体代码执行较快,第二次点击还未发生)
    3. 第2次点击事件主体,设置setTimeout(应该是:第一次的setTimeout还未执行完毕过程中,发生第2-8次点击)
    4. 第3次点击事件主体。(跳过)
    5. 第4次点击事件主体。(跳过)
    6. 第5次点击事件主体。(跳过)
    7. 第6次点击事件主体。(跳过)
    8. 第7次点击事件主体。(跳过)
    9. 第8次点击事件主体。(跳过)
    10. 第2次点击的setTimeout内函数。(i值此时被自增到8)

    参考链接:js 多线程

    展开全文
  • 起因故事起因于一段简短的代码,我以为我懂了,结果查了一天,框框中的代码为什么永远不会执行,自己做了测试,发现如果setTimeout里的code,如果是一函数的话即使延迟时间是0,也会在函数后面执行,但是如果是一...

    起因

    故事起因于一段简短的代码,我以为我懂了,结果查了一天,框框中的代码为什么永远不会执行,自己做了测试,发现如果setTimeout里的code,如果是一个函数的话即使延迟时间是0,也会在函数后面执行,但是如果是一个语句,如console.info('aa');则会立即执行(主意哦我说的是一个语句,不是字符串)。

    函数说明

    根据高程和权威指南上面的说法,setTimeout(code,delay),delay是数字,单位是毫秒,code可以是函数或者是字符串,但是不推荐字符串,会影响性能;(权威指南)如果以0毫秒的超时时间来调用setTimeout(),那么指定的函数不会立即执行,相反会把它放到队列中去,等到前面处于等待状态的事件处理程序全部执行完成后,再“立即”调用它。(setTimeout和setInterval经常有不守时的时候)。

    如果code为字符串,相当于执行eval_r(),可以看做是function(){eval_r(字符串)};表现与code为函数时是一致的,只有在执行队列为空的时候才执行(已达到延迟时间);

    js中的异步原理

    要先说明,js引擎是单线程滴,但是浏览器是多线程滴。基于这一点才能实现的异步,浏览器中只有一个线程用于js引擎处理事件,像setTimeout()中要计算延迟时间,浏览器的事件触发,http请求等等这些是浏览器的其他线程做的,不是js的那个线程,当这些线程完成之后会给js引擎一个通知,这些任务(回调函数)在js的任务队列中进行排队,一个一个被引擎处理。

    再说setTimeout和setInterval经常不守时

    setTimeout的延时为0时并不会立即触发,一个是浏览器自身就有一个几毫秒更新频率,另一个就是异步队列的问题,setTimeout中的回调函数会加入等待队列,在等待延迟触发的过程中,有新的同步脚本需要执行的话,新的同步脚本不会排在setTimeout的回调函数之后,而是立即执行。

    setInterval不会考虑当前在执行什么,而是把所有的阻塞函数都排到队列尾部,当一个很长的代码块在执行时,可能把所有的setInterval回调函数都排在队列的后面,代码执行完成之后便是一大串的setInterval回调函数等待执行,并且这些函数之间没有间隔,直到全部完成。更加详细的解释可以参看

    JavaScript的单线程性质以及定时器的工作原理

    文章组织凌乱,加上js功力尚浅,大家也可以直接跳过参看这几篇文章,都是我绝得看的比较明白的几篇

    展开全文
  • 下面是今日头条的一道前端面试题:async function async1() {console.log("async1 start");await async2();console.log("async1 end");}async function async2() {console.log("async2");...setTimeout(fu...

    下面是今日头条的一道前端面试题:

    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() {

    // setTimeout放入event-loop中的macro-tasks队列,暂不执行

    console.log("setTimeout");

    }, 0);

    async1();

    new Promise(function(resolve) {

    console.log("promise1");

    resolve();

    }).then(function() {

    console.log("promise end");

    });

    console.log("script end");

    运行结果:

    script start

    async1 start

    async2

    promise1

    script end

    promise end

    async1 end

    setTimeout

    这里涉及到Microtasks、Macrotasks、event loop 以及 JS 的异步运行机制。

    一、 单线程模型

    单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。

    注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合。

    二、同步任务和异步任务

    程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。

    同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。

    异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。

    举例来说,Ajax 操作可以当作同步任务处理,也可以当作异步任务处理,由开发者决定。如果是同步任务,主线程就等着 Ajax 操作返回结果,再往下执行;如果是异步任务,主线程在发出 Ajax 请求以后,就直接往下执行,等到 Ajax 操作有了结果,主线程再执行对应的回调函数。

    三、任务队列和事件循环

    JavaScript 运行时,除了一个正在运行的主线程,引擎还提供一个任务队列(task queue),里面是各种需要当前程序处理的异步任务。(实际上,根据异步任务的类型,存在多个任务队列。为了方便理解,这里假设只存在一个队列。)

    首先,主线程会去执行所有的同步任务。等到同步任务全部执行完,就会去看任务队列里面的异步任务。如果满足条件,那么异步任务就重新进入主线程开始执行,这时它就变成同步任务了。等到执行完,下一个异步任务再进入主线程开始执行。一旦任务队列清空,程序就结束执行。

    异步任务的写法通常是回调函数。一旦异步任务重新进入主线程,就会执行对应的回调函数。如果一个异步任务没有回调函数,就不会进入任务队列,也就是说,不会重新进入主线程,因为没有用回调函数指定下一步的操作。

    JavaScript 引擎怎么知道异步任务有没有结果,能不能进入主线程呢?答案就是引擎在不停地检查,一遍又一遍,只要同步任务执行完了,引擎就会去检查那些挂起来的异步任务,是不是可以进入主线程了。这种循环检查的机制,就叫做事件循环(Event Loop)。维基百科的定义是:“事件循环是一个程序结构,用于等待和发送消息和事件(a programming construct that waits for and dispatches events or messages in a program)”。

    四、Microtasks(微任务)、Macrotasks(宏任务)

    在高层次上,JavaScript 中有 microtasks 和 macrotasks(task),它们是异步任务的一种类型,Microtasks的优先级要高于macrotasks,microtasks 用于处理 I/O 和计时器等事件,每次执行一个。microtask 为 async/await 和 Promise 实现延迟执行,并在每个 task 结束时执行。在每一个事件循环之前,microtask 队列总是被清空(执行)。

    其中宏任务包括:

    script(整体代码)

    setTimeout

    setImmediate

    setInterval

    I/O

    UI 渲染

    ajax请求不属于宏任务,js线程遇到ajax请求,会将请求交给对应的http线程处理,一旦请求返回结果,就会将对应的回调放入宏任务队列,等请求完成执行。

    微任务包括:

    process.nextTick

    Promise

    Object.observe(已废弃)

    MutationObserver(html5新特性)

    执行过程

    上面第三条说了JS 主线程拥有一个 执行栈(同步任务) 和 一个 任务队列(microtasks queue),主线程会依次执行代码:

    当遇到函数(同步)时,会先将函数入栈,函数运行结束后再将该函数出栈;

    当遇到 task 任务(异步)时,这些 task 会返回一个值,让主线程不在此阻塞,使主线程继续执行下去,而真正的 task 任务将交给 浏览器内核 执行,浏览器内核执行结束后,会将该任务事先定义好的回调函数加入相应的任务队列(microtasks queue/ macrotasks queue)中。

    当JS主线程清空执行栈之后,会按先入先出的顺序读取microtasks queue中的回调函数,并将该函数入栈,继续运行执行栈,直到清空执行栈,再去读取任务队列。

    当microtasks queue中的任务执行完成后,会提取 macrotask queue 的一个任务加入 microtask queue, 接着继续执行microtask queue,依次执行下去直至所有任务执行结束。

    可能有的同学看到这里云里雾里,下面举例说明:

    setTimeout:

    console.log('第一行')

    setTimeout(() => {

    console.log('第三行')

    });

    console.log('第五行')

    // 输出顺序第一行->第五行->第三行

    1.1. 运行打印第一行

    1.2. 遇到宏任务setTimeout,把回调函数加入宏任务队列

    1.3. 向下执行打印第五行

    a195fbea7dc6?utm_campaign=haruki

    在第三步执行完成时

    1.4. 同步执行完毕,没有微任务,去宏任务读取任务队列,取出setTimeout回调函数,执行打印第三行

    a195fbea7dc6?utm_campaign=haruki

    执行宏任务

    Promise:

    console.log("第一行");

    let promise = new Promise(function(resolve) {

    console.log("before resolve");

    resolve();

    console.log("after resolve");

    }).then(function() {

    console.log("promise.then");

    });

    console.log("script end");

    // 输出顺序: 第一行->promise1->before resolve->after resolve->script end->promise.then

    2.1. 运行打印第一行

    2.2. promise构造函数是同步的,执行console.log("before resolve");

    2.3. resolve()是异步的,.then回调放入微任务队列,向下执行,

    2.4. 打印after resolve

    2.5. 继续执行打印script end

    2.6. 取出微任务,打印promise.then

    a195fbea7dc6?utm_campaign=haruki

    执行图

    async await:

    async function async1(){

    console.log('async1 start');

    await async2();

    console.log('async1 end')

    }

    async function async2(){

    console.log('async2')

    }

    console.log('script start');

    async1();

    console.log('script end')

    // 输出顺序:script start->async1 start->async2->script end->async1 end

    a195fbea7dc6?utm_campaign=haruki

    执行流程

    async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句。可以理解为,是让出了线程,跳出了 async 函数体

    setTimeout+Promise

    console.log("start");

    setTimeout(function() {

    console.log("timeout");

    }, 0);

    new Promise(function(resolve) {

    console.log("promise");

    resolve();

    }).then(function() {

    console.log("promise resolved");

    });

    console.log("end");

    // 执行顺序start->promise->end->promise resolved->timeout

    4.1. 输出start

    4.2. setTimeout回调函数放入宏任务

    4.3. 输出promise

    4.4. resolve()异步,回调函数放入微任务

    4.5. 输出end

    4.6. 执行微任务

    4.7. 输出promise resolved

    4.8. 执行宏任务

    4.9. 输出timeout

    第一步,执行同步代码:

    async function async1() {

    console.log("async1 start"); // 同步代码2

    await async2(); // 调用async2(),async2()的返回值是promise,不执行promise的resolve,让出线程

    console.log("async1 end");

    }

    async function async2() {

    console.log("async2"); // 同步代码3

    }

    console.log("script start"); // 同步代码1

    setTimeout(function() {

    // 异步 setTimeout放入event-loop中的macro-tasks队列,暂不执行

    console.log("setTimeout");

    }, 0);

    async1();

    new Promise(function(resolve) {

    console.log("promise1"); // 同步代码4

    resolve();

    }).then(function() {

    console.log("promise end"); // 不执行

    });

    console.log("script end"); // 同步代码5

    console.log("script start"); // 同步代码1这句代码毫无疑问是同步执行的 ;

    setTimeout()是异步任务,加入异步队列,不执行;

    然后调用async1(),执行这个方法体内的同步函数,打印console.log("async1 start"); // 同步代码2;

    向下执行,遇到await关键字,调用async2(),执行同步代码打印console.log("async2"); // 同步代码3,让出线程。await是让出当前函数线程,交给函数外的代码执行;

    线程跳出async1(),向下执行Promise(),执行里面的同步代码打印promise1,resolve是异步函数,加入异步队列,此时继续执行同步函数,回到await关键字处,执行剩余代码;

    async2()是异步方法,默认返回promise,所以把返回的promise加入异步队列;

    此时没有同步任务,就去执行异步任务,因为setTimeout()的优先级低于promise,所以会优先执行promise队列。

    此时异步队列任务顺序: setTimeout()-new Promise().resolve()-async2().resolve(),setTimeout优先级低,所以先执行下一个,打印console.log("promise end");

    继续执行异步任务,async2()执行完毕,同步await,这时候同步向下执行console.log("async1 end");

    最后执行setTimeout()。

    a195fbea7dc6?utm_campaign=haruki

    执行顺序图

    回到最初的面试题:

    async function async1() {

    console.log("async1 start"); // 同步代码2

    await async2(); // 调用async2(),async2()的返回值是promise,不执行promise的resolve,让出线程

    console.log("async1 end");

    }

    async function async2() {

    console.log("async2"); // 同步代码3

    }

    console.log("script start"); // 同步代码1

    setTimeout(function() {

    // 异步 setTimeout放入event-loop中的macro-tasks队列,暂不执行

    console.log("setTimeout");

    }, 0);

    async1();

    new Promise(function(resolve) {

    console.log("promise1"); // 同步代码4

    resolve();

    }).then(function() {

    console.log("promise end"); // 不执行

    });

    console.log("script end"); // 同步代码5

    console.log("script start"); // 同步代码1这句代码毫无疑问是同步执行的 ;

    setTimeout()是异步任务,加入宏任务队列,不执行;

    然后调用async1(),执行这个方法体内的同步函数,打印console.log("async1 start"); // 同步代码2;

    向下执行,遇到await关键字,调用async2(),执行同步代码打印console.log("async2"); // 同步代码3,让出线程。await是让出当前函数线程,交给函数外的代码执行;

    线程跳出async1(),向下执行Promise(),执行里面的同步代码打印promise1,resolve是异步函数,加入微任务队列,此时继续执行同步函数,回到await关键字处,执行剩余代码;

    此时没有同步任务,就去执行微任务队列任务,所以会优先执行promise队列。

    此时微队列任务顺序:new Promise().resolve()- console.log("async1 end");,s所以先执行下一个,打印 console.log("promise end")`;

    这时候同步向下执行console.log("async1 end");

    最后执行宏任务setTimeout()。

    展开全文
  • 应用场景决定了javascript的单线程的特性,假如javascript是线程,同时进行:一线程对某一dom进行添加属性操作,另一线程对该线程进行删除操作,那么浏览器该听哪一。这就决定javascript必须是单线程。 ...
  • 在nodejs中setTimeout、setInterval、setImmediate、nextTick都是异步执行的,在执行过程中肯定会存在执行先后顺序的问题,具体的执行情况可以总结如下: setTimeout与setInterval setTimeout和setInterval属于同级...
  • 今天讨论问题,涉及到了多个await执行顺序的问题,折腾了半个多小时终于弄懂了。 下边是个简单的代码: function test1() { console.log(111); } function test2() { console.log(222); } async function test3() ...
  • setTimeout执行时间

    2021-06-02 22:01:56
    经典问题: js setTimeout 0秒,会立即执行吗? setTimeout 1000ms 若是没有...setTimeout(function(){console.log("setTimeout执行了")},0) for(var i=0;i<1000000000;i++){ if(i==999999999){ console.log(i);
  • 关于async/await、promise和setTimeout执行顺序,当时没做对。 后来查了查是非常经典的题目。也给大家解疑答惑一下,说出自己的理解。 题目是看代码写结果。 async function async1() { console.log('async1 ...
  • 一、微任务与宏任务执行顺序 微任务队列只有一个,宏任务队列可以有多个。 宏任务包括:script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering 微任务包括: new Promise().then(回调), ...
  • 问题:多个延时器顺序执行,依次打印 function a() { setTimeout(() => { console.log(1) }, 200) } function b() { setTimeout(() => { console.log(2) }, 10) } function c() { setTimeout(() =&...
  • 文章目录异步和同步的概念js有哪些异步定时器事件绑定发布/订阅模式(观察者模式)回调函数ajaxpromisepromise是什么promise能做什么promise三状态Promise的优缺点promise 链式调用async await异步实现原理(事件...
  • 方法1: function wait1(){ var dtd = $.Deferred(); // 生成Deferred对象 $.ajax({ url:"。。。", data:[], success:function(data){ console.log(data);... // 改变Deferred对象的执行状态 ...
  • 多个异步请求顺序进行 即在请求完接口1的数据data1之后,需要根据data1的数据,继续请求接口2,获取data2,然后根据data2的数据,继续请求接口3…… function myFun01() { console.log('以下内容是在myFun01中输出...
  • Promise是解决异步编程的方案,也是一构造函数,自身有reject、resolve这几方法,原型上有then、catch等方法,new Promise(实例化Promise)结合原型链上的then、catch方法可以获取异步操作的信息 then() ----...
  • //所有setTimeout定义的操作都会放在一队列中,等待函数调用栈(所有可执行代码)执行完毕后才会执行 new Promise(function (resolve, reject) { console.log(3);//立即触发1 resolve(); })..
  • 下面一段代码是在网上看到的一段关于promise和setTimeout的输出顺序的代码,下面做一下解答,有兴趣的百度自行了解js的执行机制(包括宏任务和微任务,这里就不在说): 1、new promise事件只要建立,里面的代码会...
  • 朋友在写面试题:宏任务与微任务的执行时机时,容易犯迷糊。之前我也写过两篇文章,这次加上详细的讲解,让大家更容易理解。 什么是宏任务、微任务? 1、首先要称得上是宏任务、微任务的,必须是一回调函数,...
  • 执行某个函数、用户点击一次鼠标,Ajax完成,一图片加载完成等事件发生时,只要指定过回调函数,这些事件发生时就会进入执行栈队列中,等待主线程读取,遵循先进先出原则。 主线程 要明确的一点是,主线程跟执行...
  • setTimeout(() => { console.log('fn1执行') fn2('fn1传递过去的参数') }, 1000) } function fn2(data) { setTimeout(() => { console.log('fn2执行', data) fn3('fn2传递过去的参数') }, 1000) ...
  • 开篇先写中心:借助deferred对象,jq可自主控制不同函数之间执行...setTimeout():最初遇到这类问题,我可能会依赖于setTimeout()方法,但是用setTimeout改变函数执行顺序会出现很问题,首先是时间设定,可能过短,导
  • 使用场景:当异步操作需要按顺序执行时可以使用,如按顺序读取多个文件内容。 限制:await 后面表达式 异步出错了 会中断下一步的await 表达式的异步执行; let asyncFn = async function() { await Promise....
  • 开端在Vue中有一nextTick方法,偶然一天,我发现不管代码的顺序如何,nextTick总是要比setTimeout先要执行。同样是排队,凭什么你nextTick就要比我快?开局一道题,内容全靠编。(在node下运行,答案在文末给出。)...
  • 有时候在一业务事件处理流程上,可能会遇到点击了一按钮或者其他事件触发了一动作需要执行以上的Ajax请求,但是可能要顾虑到Ajax请求执行的先后顺序,有时候Ajax请求顺序出问题,会导致各种问题例如现在有...
  • 心得 js中事件可以注册多个handler形成handlers. handlers类似于一个处理器的数组。事件触发后,该事件的handler处理器会被依次执行. 这里举个跟上面有点区别的例子:假如在某个handler执行的过程中,又给该事件...
  • 相信大家都会遇到一种情况,多个请求并发执行,但现在的需求是要在一个请求或多个请求之后再调用某一个未知函数,这就需要用到es6的Promise对象和async函数了活不多说,直接上demo,套用即可//模拟ajax异步操作1...
  • 在项目中碰到一问题:图一:图二:函数1代码:这里是因为有ajax请求,默认的是异步的//点击分页页码,请求后台返回对应页码的数据function getdata(fewPage,flag,content){$.getJSON(getUrl()+'/myAccount/...
  • 单线程严格意义上来说,javascript没有线程的概念,所有的程序都是单线程依次执行的。1、什么是单线程?通俗点说,就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行。我们拿一段...
  • JS的运行机制先来一今日头条的面试题async function async1() {console.log('async1 start');await async2();console.log('async1 end');}async function async2() {console.log('async2');}console.log('script ...
  • 宏任务macrotasks:setTimeout、setInterval、...每一个事件循环都有一个微任务队列、一个或者多个宏任务队列。 console.log('同步代码1'); setTimeout( ()=>{ console.log('异步代码5,宏任务,优先级较低'); .

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,611
精华内容 13,844
关键字:

多个settimeout执行顺序