Как обрабатывать ответы на веб-сайт последовательным образом с использованием интервала в javascript?

Question

Я пишу карточную игру, в которой есть один и многопользовательский режим. В случае игры с одним игроком скрипт генерирует ходы в ответ на действия игрока. Моя проблема заключается в том, что этот скрипт движется мгновенно, и я хочу, чтобы игрок почувствовал, что ИИ «думает» на своем ходу, поэтому подождите с каждым ответом, прежде чем отображать его в течение 2 секунд.

Поскольку я использую архитектуру браузера + сервера с клиентом javascript, это ожидание довольно проблематично. Код, который у меня есть в настоящее время, не ведет себя так, как я хочу. Идея заключается в том, что когда ответ приходит от клиента websocket и генерируется ai, ответ отправляется в очередь. И есть интервал, который выполняется каждые 2 секунды и пытается выставить эту очередь. Вот мой код:

 // interval 
     var responseQueue = []; 
     $interval(function() { 
      var response = responseQueue.shift(); 
      if (response !== undefined) { 
       processResponse(response); 
      } 
     }, OPPONENT_MOVE_REFRESH_INTERVAL); 

     // websocket response 
     SocketFactory.subscribe("/user/queue/game.gameResponse", function (response) { 
      var res = JSON.parse(response.body); 
      // the current player moved, refreshing view 
      if ($scope.username === res.currentPlayerId) { 
       processResponse(res); 
      } else { 
       // the opponent moved (the ai in this case) 
       responseQueue.push(res); 
      } 
     }); 

То, что я получаю, является чем-то вроде случайного поведения. Карты появляются, но не через 2 секунды, и иногда данные теряются. Что я делаю не так?

Примечание: игрок может перемещаться более одного раза, поэтому иногда я получаю 2-3 движения AI в быстрой последовательности.

Answer 1

что-то вроде следующего должно работать лучше, потому что оно обеспечивает задержку между ответом и действием на экране, а не просто задержкой на основе последнего ранее запланированного обновления. я все еще не уверен, что это остановит ваши недостающие карты (ваш код действительно выглядит нормально), но это сделает задержки более последовательными.

// interval 
    var responseQueue = []; 
    function next() { 
     var response = responseQueue.shift(); 
     if (response !== undefined) { 
      processResponse(response); 
     } 
     if(responseQueue.length) next.timer=setTimeout(next, 2000); 
    } 

    // websocket response 
    SocketFactory.subscribe("/user/queue/game.gameResponse", function (response) { 
     var res = JSON.parse(response.body); 
     // the current player moved, refreshing view 
     if ($scope.username === res.currentPlayerId) { 
      processResponse(res); 
     } else { 
      // the opponent moved (the ai in this case) 
      clearTimeout(next.timer); 
      responseQueue.push(res); 
      next.timer=setTimeout(next, 2000); 
     } 
    }); 

В настоящее время ничего не произойдет до 2 секунд после чего-то еще.