关于setTimeout和console.log执行顺序

最新推荐文章于 2024-07-30 00:08:11 发布

原创最新推荐文章于 2024-07-30 00:08:11 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端专栏收录该内容

2 篇文章

订阅专栏

本文通过几个具体的实验探讨了在JavaScript中使用递归和setTimeout实现阻塞的效果，并深入讨论了同步与异步任务的执行机制。

最近为了用bootstrap 的modal 模态框重写confirm确认框做了一些实验，在追求阻塞的路上，悲剧的都失败了。在悲愤之际我决定写一个简单粗暴的递归程序来强行阻塞我的程序，然鹅，在使用setTimeout 和console.log 做实验的时候，出现了更加复杂和深刻的问题。

首先，代码1：

function _confirm(text) {
   flag = -1;// flag初始值
    $("#modal-confirm").modal('show')// 显示模态框
    $("#modal-confirm .modal-body").text(text);//修改模态框提示内容
    $("#modal-confirm .btn-default").off("click");
    $("#modal-confirm .btn-default").on("click",function(){//点击取消按钮，输出cancle！,flag设为0
       console.log("cancel!");
       flag = 0;
    });
    $("#modal-confirm .btn-primary").off("click");
    $("#modal-confirm .btn-primary").on("click",function(){//点击确认按钮，输出sure，flag设为1
        console.log("sure!");
        flag = 1;
    });
    while (flag < 5 ) {
        flag = flag + 1;
        console.log(flag);
    
    }
};  

_confirm("dgtest!");

输出：

无视警告。

问题1：为什么console.log输出两遍？

代码2

其余同代码1：

  while (flag < 5 ) {        
        flag = flag + 1;
        setTimeout(function(){console.log("{" +flag +"}");}, 0);
        console.log(flag);
    }

输出：

问题2：为什么

setTimeout(function(){console.log("{" +flag +"}");}, 0);

立即执行，但在console.log之后输出？

代码3：

    while (flag < 5 ) {        
        flag = flag + 1;
        setTimeout(function(){console.log("{" +flag +"}");}, 3000);
        console.log(flag);
    }

点击确认。

输出：