Асинхронная очередь запросов на сервер с фиксированным интервалом на JavaScript

23 ноября 2021, 01:20

Есть код синхронного запроса. Синхронный используется потому, что нельзя отправлять параллельные запросы, сервер отвечает не чаще раза в секунду, более частые запросы блокируются. Ну и естественно, есть неприятный момент в виде "подвисания" страницы при выполнении.

var strings = document.getElementsByClassName('hidstr');
var tac = document.getElementsByClassName('tac');
for (var i = 0; i < cnnt; i += 1) {
    if (tac[i].offsetHeight > 0) {
        var xmlhttp = getHttp();
        xmlhttp.open('POST', './req/post.php', false);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send(strings[i].value + '&date=' + st + '&text=' + tac[i].value);
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var info = xmlhttp.responseText;
                }
            }
        }
    }
}

Помогите превратить запрос в асинхронный, сохранив фиксированный интервал в 0.5 секунды. Если интервал не будет соблюдаться, сервер проигнорирует запрос клиента.

Answer 1

Можно создать очередь запросов на основе кода ниже...

class Queue {
  constructor(interval = 1000) {
    this._queue = [];
    this._monitor = setInterval(() => {
      const request = this._queue.shift();
      if (request) {
        console.log(request, Math.floor(Date.now() / 1000));
      } else {
        return;
      }
    }, interval);
  }
  dispose = () => clearInterval(this._monitor);
  push = (str) => this._queue.push(str);
}
const queue = new Queue(5000);
queue.push("123");

Код, помимо значения, выводит unit timestamp, чтобы можно было убедиться в интервале исполнения между запросами.

Заасинхронить с интервалами такой код не составит ни малейшего труда...

this._lambda = async () => {
  const request = this._queue.shift();
  if (request) {
    const response = await fetch(`http://${request}`);
    console.log(request, response, Math.floor(Date.now() / 1000));
    setTimeout(this._lambda, interval);
  } else {
    setTimeout(this._lambda, interval);
  }
}
this._lambda();
...
dispose = () => this._lambda = () => null;