javascript - 窗口完全加载的 setTimeout 的最佳替代是什么？

Question

J是一个具有各种功能的对象。

当 g、m 和 c 在窗口中完全加载时(对于 Web 和移动设备)，函数 u、t 和 z 应该运行，这需要几毫秒的服务器响应时间。

替代 setTimeout 函数(800 毫秒)的最快或最佳方法是什么？

感谢一百万，

中号

J.o({p:'/dir/file-1.txt'});
J.e({
    g:'/dir/file-2.txt',
    m:'/dir/prefix-',
    c:'/dir/prefix-string.txt'
}); // a function that gets a few files with texts or JSON objects
setTimeout(function(){ 
    J.u({g: window['g'],m: window['m'],c: window['c']}); // a function to be run after loading three JSON objects in window
    J.t(window['p'],{t:"two"}); // a function to be run after loading another large JSON object
    J.z({});
}, 800);




// J.o function 
o:function(z){
    var g,h,x=[];

    Object.keys(z).forEach(function(a,b,c){
        window[a]=null;
        x[b]=new XMLHttpRequest();
        url=window.location.origin.concat('/',z[a.toString()]);
        x[b].open("GET",url,true);
        x[b].onreadystatechange=function (z){
            if(x[b].readyState===4){
                if(x[b].status===200 || x[b].status==0){
                    window[a]=x[b].responseText;
                }
            }
        }
        x[b].send();
     });
}



// J.e function for styles
e:function(z){
    var w,y,e,ar,x=[];
    Object.keys(z).forEach(function(a,b,c){
        window[a]=null;
        x[a]=new XMLHttpRequest();
        if(a=='m'){
            w=window.innerWidth; /*window size*/
            switch(true) {
                case(w<200):
                    window.y='a1';window.e=0.8; /*tiny*/ 
                    break;
                case(w>=200&&w<=360):
                    window.y='a2';window.e=0.9;/*x small*/
                    break;
                case(w>360&&w<=480):
                    window.y='a3';window.e=1; /*small*/
                    break;
                case(w>480&&w<=768):
                    window.y='a4';window.e=1.1; /*medium*/
                    break;
                case(w>768&&w<=1280):
                    window.y='a5';window.e=1.3; /*large*/
                    break;
                case(w>1280&&w<=1920):
                    window.y='a6';window.e=1.6; /*x large*/
                    break;
                case(w>1920):
                    window.y='a7';window.e=1.9; /*xx large*/
                    break;
                default:
                    window.y='a5';window.e=1.2; /*default size */
                    break;
            }
            url=window.location.origin.concat('/',z[a.toString()],window.y,'.txt');

        } else {
            url=window.location.origin.concat('/',z[a.toString()]);
        }
        x[a].open("GET",url,true);

        x[a].onreadystatechange=function (z){
            if(x[a].readyState===4){
                if(x[a].status===200 || x[a].status==0){
                    window[a]=x[a].responseText;
                }
            }
        }
        x[a].send();
     });
}

Answer 1

使用 Promises 代替，然后您可以使用 Promise.all，当传递的数组中的所有 Promise 都得到解析时，它将解析。不再使用 forEach 遍历传递对象的 keys，而是 .map 将每个键映射到 Promise:

const getProm = (url) => new Promise((resolve, reject) => {
  const x = new XMLHttpRequest();
  x.open("GET", url, true);
  x.onreadystatechange = function() {
    if (x.readyState === 4) {
      if (x.status === 200 || x.status == 0) {
        resolve(x.responseText);
      } else {
        reject(x.status);
      }
    }
  }
});

// J.o function 
o: function(z) {
  var g, h, x = [];
  const proms = Object.keys(z).map(function(a, b, c) {
    window[a] = null;
    x[b] = new XMLHttpRequest();
    const url = window.location.origin.concat('/', z[a.toString()]);
    return getProm(url)
      .then((responseText) => {
        window[a] = responseText;
      });
  });
  return Promise.all(proms);
}

// J.e function for styles
e: function(z) {
  var w, y, e, ar, x = [];
  const proms = Object.keys(z).map(function(a, b, c) {
    window[a] = null;
    if (a == 'm') {
      w = window.innerWidth; /*window size*/
      switch (true) {
        case (w < 200):
          window.y = 'a1';
          window.e = 0.8; /*tiny*/
          break;
        case (w >= 200 && w <= 360):
          window.y = 'a2';
          window.e = 0.9; /*x small*/
          break;
        case (w > 360 && w <= 480):
          window.y = 'a3';
          window.e = 1; /*small*/
          break;
        case (w > 480 && w <= 768):
          window.y = 'a4';
          window.e = 1.1; /*medium*/
          break;
        case (w > 768 && w <= 1280):
          window.y = 'a5';
          window.e = 1.3; /*large*/
          break;
        case (w > 1280 && w <= 1920):
          window.y = 'a6';
          window.e = 1.6; /*x large*/
          break;
        case (w > 1920):
          window.y = 'a7';
          window.e = 1.9; /*xx large*/
          break;
        default:
          window.y = 'a5';
          window.e = 1.2; /*default size */
          break;
      }
      url = window.location.origin.concat('/', z[a.toString()], window.y, '.txt');

    } else {
      url = window.location.origin.concat('/', z[a.toString()]);
    }
    return getProm(url)
      .then((responseText) => {
        window[a] = responseText;
      });
  });
  return Promise.all(proms);
}

然后，您可以在 J.o 和 J.e 的调用上调用 Promise.all:

Promise.all([
  J.o({p:'/dir/file-1.txt'}),
  J.e({
    g:'/dir/file-2.txt',
    m:'/dir/prefix-',
    c:'/dir/prefix-string.txt'
  })
]).then(() => {
  console.log('All requests have finished');
})
.catch((e) => {
  // handle errors
});

请注意，如果您可以设法切换到 fetch 而不是 XMLHttpRequest - fetch 返回一个 Promise 已经存在，因此无需使用它显式构造 Promise:

const getProm = url => fetch(url).then((res => res.text());

但它在古代浏览器中不受支持，因此要可靠地使用它，您还需要一个填充。

如果您分配给 window[a] 的唯一原因是为了稍后能够访问异步返回的值，请不要使用 Promises 解析到的值。例如:

Promise.all([
  getProm('foo'),
  getProm('bar')
])
.then(([foo, bar]) => {
  // foo and bar are variables which hold the response text for foo and bar
});

顺便说一句，您可能会强烈考虑仅调试和更改源代码，而不是缩小的代码。缩小的代码读起来很痛苦。