JavaScript делает очередь из запросов

Question

У меня есть функция, которая запрашивает данные с сервера и открывает страницу.И возвращает индекс страницы.Называется - showpage ().Также у меня есть методы - active () (возвращает текущий открытый индекс страницы), next () и previous ()

Так что следующий и предыдущий методы под капотом делают метод showpage ().

Но проблема в том, что когда я выполняю этот тип скрипта:

console.log(active());
showpage(9998)
console.log(active());
console.log(next());
console.log(active());

Он должен вывести меня:

0, 9998 9999 9999

Но это дает мнечто-то абсолютно не так.Я понимаю, что это связано с запросами к серверу, которые были завершены ранее - портят результат.

Итак, я создал простую скрипку, которая показывает мою проблему:

https://jsfiddle.net/xpvt214o/875828/

Вот небольшой пример:

button.on("click", function(){
    makeRequest("https://jsonplaceholder.typicode.com/photos", 1);
    makeRequest("https://jsonplaceholder.typicode.com/comments", 2);
    makeRequest("https://jsonplaceholder.typicode.com/todos", 3);
    makeRequest("https://jsonplaceholder.typicode.com/albums", 4);
    makeRequest("https://jsonplaceholder.typicode.com/users", 5);
})

function makeRequest(url, id){
    $.ajax({
        url: url,
    })
.done(function( data ) {
    console.log(id);
 });
}

Таким образом, вывод должен быть:

1, 2, 3, 4, 5

В проекте нет jQuery, здесь он просто добавлен для быстрого примера

Есть ли способ легко заставить их стоять в очереди?Что-то похожее на SemaphoreSlim в C #?

Answer 1

Вот обновление, закодированное с использованием рекурсии для поддержания последовательности.Мы заполняем массив запросов и затем обрабатываем их один за другим, пока не останется

var reqArr= [];

button.on("click", function(){
  reqArr.push({url:"https://jsonplaceholder.typicode.com/photos",v:1});
  reqArr.push({url:"https://jsonplaceholder.typicode.com/comments",v:2});
  reqArr.push({url:"https://jsonplaceholder.typicode.com/todos",v:3});
  reqArr.push({url:"https://jsonplaceholder.typicode.com/albums",v:4});
  reqArr.push({url:"https://jsonplaceholder.typicode.com/users",v:5});
  makeRequest();
})

function makeRequest(){
  if(reqArr.length==0) return;//stop recursion
  var obj=reqArr.shift();

  $.ajax({
    url: obj.url,
  })
  .done(function( data ) {
    console.log(obj.v);
    return makeRequest();
  });
}