js定时器 settimeout和其他代码是同步执行还是异步执行

Posted 2023-05-11

js是同步执行的，一个简单示例解释，

for(var i = 0;i < 10;i++)
    console.log(i)
for(var i = 10;i < 20;i++)
    console.log(i)

以上两个for循环，第一个打印1-10，第二个打印10-20，结果是1-20按顺序输出

js中代码是同步执行的，只有在ajax的情况下，会导致代码执行顺序改变，是因为ajax的请求时间导致 参考技术A 定时器简单来说就是在一定时间后执行
并调用里面的函数，里面的函数为回调函数，回调函数为异步，触发后放进消息队列本回答被提问者采纳 参考技术B 异步的

~~~~~~~~~~~~~

JS同步与异步；

JS的同步与异步

同步：代买从上往下的执行

异步：每个模块各执行各的，同时执行，互不干扰

四个异步事件：（1）定时器（2）ajax（3）时间的绑定（4）回调函数

现在用定时器来说一说setTimeOut事件的同步和异步

for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
console.log(i);

以上函数的输出结果无非是两种：（1）0 1 2 3 4 5 5 （2）5 5 5 5 5 5 5

但是结果显然是第二种

首先看一下学习同步异步的方法：

同步优先、异步靠边、回调垫底

用公式表达就是：同步 => 异步 => 回调

然后就可以得知：

 1）for循环和循环体外部的console是同步的，所以先执行for循环，再执行外部的console.log。（同步优先）

 2）for循环里面有一个setTimeout回调，他是垫底的存在，只能最后执行。（回调垫底）

 那么，为什么我们最先输出的是5呢？

 这个也是非常好理解，for循环先执行，但是不会给setTimeout传参（回调垫底），等for循环执行完，就会给setTimeout传参，而外部的console打印出5是因为for循环执行完成了
那么解决的办法都有哪些呢？

（1）闭包

for (var i = 1; i <=20; i++){
(function (i) {
setTimeout(function timer() 

console.log(i);
}, i*1000)
})(i);
}
（2）把他的每个得索引值存到一个属性里

for (var i = 0; i < 5; i++) {
setTimeout(function() {

var i.index=i;
console.log(this);
}, 1000);
}
console.log(i);

可能解决的办法还有更多，持续更新吧...