JavaScript同步与异步任务问题详解

更新时间：2022年07月19日 11:14:27 作者：qiaokelizhuzhu

这篇文章主要介绍了JavaScript事件循环同步任务与异步任务，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下

js会出现异步问题场景

延时操作
数据请求同异步
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同步与异步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS+html5实现异步上传图片显示上传文件进度条功能示例
这篇文章主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下
2019-11-11
JavaScript将字符串转换成字符编码列表的方法
这篇文章主要介绍了JavaScript将字符串转换成字符编码列表的方法,实例分析了javascript中charCodeAt函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JavaScript运行机制之事件循环(Event Loop)详解
这篇文章主要介绍了JavaScript运行机制之事件循环(Event Loop)详解,本文从多个方面讲解了Event Loop,需要的朋友可以参考下
2014-10-10
JavaScript中ES6字符串扩展方法
这篇文章主要介绍了JavaScript中ES6字符串扩展方法的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-08-08
浅谈Javascript事件模拟
事件是用来描述网页中某一特定有趣时刻的，众所周知事件通常是在由用户和浏览器进行交互时触发，其实不然，通过Javascript可以在任何时间触发特定的事件，并且这些事件与浏览器创建的事件是相同的
2012-06-06
微信小程序实现横屏手写签名
这篇文章主要为大家详细介绍了微信小程序实现横屏手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
javascript中Array()数组函数详解
在JavaScript中数组也是比较常用的对象之一，数组是值的有序集合，本篇文章给大家分享Javascript中Array()数组函数详解，需要的朋友可以参考下
2015-08-08
es6学习笔记之Async函数的使用示例
async 函数，使得异步操作变得更加方便。它是 Generator 函数的语法糖。下面这篇文章主要给大家介绍了es6学习笔记之Async函数使用的相关资料，文中给出了详细的示例代码，需要的朋友们下面来一起看看吧。
2017-05-05
使用localStorage替代cookie做本地存储
这篇文章主要为大家详细介绍了使用localStorage替代cookie做本地存储，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
js 实现菜单左右滚动显示示例介绍
菜单左右滚动显示的实现方法有很多，在本文将为大家介绍下如何使用js实现，需要的朋友可以参考下，希望对大家有所帮助
2013-11-11