本文深入解析JavaScript中同步与异步任务的执行机制，涵盖延时操作、数据请求及事件监听等常见场景。针对请求耗时导致的代码执行顺序错乱问题，详细对比了箭头函数回调、jQuery同步设置以及async/await等多种解决方案，帮助开发者掌握控制异步流程的关键技术。
JavaScript中异步问题出现的典型场景
- 延时操作
- 数据请求的同步与异步处理
- Promise异步处理
- 回调函数（最常见的内置函数支持接收回调函数以执行异步代码）
- 事件监听，例如click事件等属于异步操作
- 订阅与发布模式
今日遇到的问题：数据请求耗时过长，导致后续代码在请求完成前先行执行
初步构思的解决思路：
- 采用箭头函数，利用函数的返回值机制，强制使数据请求与后续代码同步执行
- 将异步请求修改为同步请求
- 利用async/await结合Promise，实现异步操作的同步化执行
- 开关函数方案
- 延时操作方案
延时操作方案详解
该方案的缺陷：无法预知数据请求的确切耗时，进而难以确定后续数据展示所需的准确延迟时间
function tes0t() {
fn1();
fn2();
fn3();
}
function fn1() {
console.log(1);
}
function fn2(） {
setTimeout(function () {
console.log(2);
}, 1000);
}
function fn3() {
setTimeout(function () {
console.log(3);
}, 0);
}
tes0t();开关函数方案详解
预期输出结果为：1，2，3
实际运行输出结果为：1，3，2
因此，该方案无法达到预期的执行顺序效果
var kai=false
function tes0t() {
fn1();
fn2();
fn3();
}
function fn1() {
console.log(1);
}
function fn2() {
setTimeout(function () {
console.log(2);
kai= true;
}, 1000);
// console.log();
}
function fn3() {
setTimeout(function () {
console.log(3);
}, 0);
}
tes0t();将jQuery异步请求配置为同步请求
该方法是否真正达到预期效果尚待验证
$.ajaxSettings.async = false;//同步请求
Global_MBPage.$gt(url, params, function (json) {}
$.ajaxSettings.async = true;//异步请求 - 默认是异步
使用箭头函数及函数返回值，强制使数据请求与后续代码同步执行
经测试，该方法可达到预期效果，最终输出结果为1，2，3
function tes0t() {
fn1();
fn2(1, 1, () => {fn3();});
}
function fn1() {
console.log(1);
}
function fn2(n1, n2, n3) {
setTimeout(function () {
console.log(2);
if (n3) n3.call();//返回值的设置
}, 1000);
}
function fn3() {
setTimeout(function () {
console.log(3);
}, 0);
}
tes0t();利用async/await结合Promise，实现异步操作的同步化执行
function fn4(){
return new Promise(resolve=>{
setTimeout(function(){
msg='等啥 '
resolve(msg)
},1000)
})
}
async function aC(){
var result = await fn4();
console.log(result);
}
aC() // 控制台输出为‘等啥’
至此，关于JavaScript同步与异步任务问题的详解介绍完毕，更多相关JavaScript同步异步内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！