广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript同步与异步任务问题详解
  • 895
分享到

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

2024-04-02 19:04:59 895人浏览 安东尼
摘要

目录js会出现异步问题场景标题延时操作开关涵数Jquery异步请求设置为同步请求js会出现异步问题场景 延时操作数据请求同异步promise 异步回调涵数(最常见多内置涵数支持接收回

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同步与异步 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript同步与异步任务问题详解

本文链接: https://www.lsjlt.com/news/164623.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作