亲宝软件园·资讯

展开

JavaScript同步与异步

qiaokelizhuzhu 人气:0

js会出现异步问题场景

今天遇到的问题是,请求数据时间太长,会先执行之后的代码,

初步预想的解决方法:

标题延时操作

缺点:不知请求数据需要多长时间,之后的数据需要延迟多少时间展示,是个问题。

      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() 

// 输出为‘ 等啥 ’

加载全部内容

相关教程
猜你喜欢
用户评论