主页 / 问题 / 634757
Accepted
VostokSisters
Asked:2020-03-03 05:46:42 +0000 UTC2020-03-03 05:46:42 +0000 UTC

在承诺中顺序执行处理程序

  • 772

有这样一段代码： 

'use strict';
console.log('---');

function getRandom(min, max) {
  return Math.floor(min + Math.random() * (max - min + 1));
};

var promise = new Promise((resolve) => {
  setTimeout(() => resolve('загрузился json за секунду'), 1000);
});

function getNewArts(setRandomTime, whatIsThisThen) {
  promise.then(() => {
    setTimeout(() => {
        console.log(`грузится ${whatIsThisThen}-я пачка артов за ${setRandomTime} мс`);
      },
      setRandomTime);
  });
};

getNewArts(getRandom(1400, 2000), 1); 
getNewArts(getRandom(1400, 2000), 2);
getNewArts(getRandom(1400, 2000), 3);

此代码旨在模拟从服务器加载json，然后将图片添加到HOME。
我把代码一一分解解释。
strings'use strict'和'console,log('---');函数getRandom()希望是不言自明的。
接下来，我创建一个新promise的模拟从此处的服务器加载 json。为了在示例中模拟异步，我使用了timers。
接下来是getNewArts()向DOM添加图片的功能（需要json加载后添加（有url），所以我用promise了（所谓的promises）。
只有在加载了整个新包后，您才需要将图片添加到 HOUSE。为了模拟新图片包的加载，使用了一个定时器，加载时间由随机数函数生成。事实上，接下来是getNewArts()加载新包的函数调用。
在这里我有一个问题：毕竟，很明显图像的加载时间可以不同，但​​是有必要根据它们在缓存中的准备加载来添加图像包，而每个处理程序应该.then顺序执行, 在执行之前安装的一个之后？
控制台输出时间从最小到最大的文本，这意味着所有处理程序立即开始执行。
如何修复代码以使其按顺序运行？

您可以自己在代码片段中运行控制台输出。可能在第一次尝试时它会显示正确的引导顺序（1、2、3），但不要相信，再次运行测试。这就是我希望的样子： 我注意图像的模拟加载时间，以及处理程序的执行顺序- 它们按顺序进行，因为图像可以在不同时间加载，并且它们需要依次显示。
在此处输入图像描述
.then

javascript

1 个回答

  1. Best Answer

    要创建一个队列（事实证明，这正是需要做的），您可以这样做（递归）：

    'use strict';
console.log('---');

function getRandom(min, max) {
  return Math.floor(min + Math.random() * (max - min + 1));
};

var promise = new Promise((resolve) => {
  setTimeout(() => resolve('загрузился json за секунду'), 1000);
});

function getNewArts(setRandomTime, whatIsThisThen) {
  return new Promise((res, rej) => {
    setTimeout(() => {
        res(`грузится ${whatIsThisThen}-я пачка артов за ${setRandomTime} мс`);
      },
      setRandomTime);
  });
};


class Queue{
  constructor(data = []){
    if(!Array.isArray(data))
      data = [];
      
    this.data = data;
    this._processing = false;
    
    if(data.length)
      this.handle();
  }
  
  handle(){
    // Выходим, если больше нет элементов
    if(this.data.length){
      this._processing = true;
    
      // Spread'им элементы очередного вызова
      getNewArts(...this.data.shift())
        .then(result => {
          // Обрабатываем результат
          console.info(result);

          // Если данные остались после извлечения, запускаем ещё раз обработку
          if(this.data.length)
            this.handle();
          else
            this._processing = false;
        });
     }
  }
  
  add(...data){
    this.data.push(data);
    
    if(!this._processing)
      this.handle();
  }
}

let queue = new Queue();

queue.add(getRandom(1400, 2000), 1);
queue.add(getRandom(1400, 2000), 2);
queue.add(getRandom(1400, 2000), 3);

    • 0

相关问题