js单线程执行引起的setTimeout和ajax执行的迷之bug

最新推荐文章于 2025-05-17 14:45:45 发布

原创

最新推荐文章于 2025-05-17 14:45:45 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文通过分析setTimeout和Ajax异步请求在实际应用中出现的问题，探讨JavaScript的单线程执行机制以及事件循环原理。理解浏览器的执行线程、事件触发线程和HTTP请求线程如何协同工作，有助于解决异步执行中的谜题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

近期，在做倒计时动画时，用到了setTimeout()这个计时函数，在使用时，由于不太理解js的执行原理，光看函数的用法写出了一段代码，结果发现setTimeout的执行非常的迷，和自己想象的完全不同，行为可以用“诡异”来形容。同样的问题在我写一个ajax异步请求时，又遇到了一个神奇的执行次序，由这两个bug情景，我认识到了理解js执行原理的重要性。

情景一：

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

以上这段代码按照我之前的理解，应该是每隔1S在控制台输出一个'exeute',但是可以按F12在控制台运行一下试试，结果是在停顿1s后，立即输出了100个'exeute',这有些难以理解。

情景二：

export default {
	data(){
		return {
			message:[]   // 这是一个数组
		}
	}
	method:{
		getMessage(){
			/*
			* 如果信息仓库里存储着信息，就直接赋值
			* 如果为空，就异步请求
			*/
			if (store.length===0) {
				axios({
					method: 'get',
					url: '/common/'
				})
					.then(function (response) {
						if (response) {
						  this.message = store = response;
						}
					})
					.catch(function (error) {
						console.log(error);
					});
			}   
			else{
				// 直接用仓库里的数据赋值
				mes