javascript - 轮询ajax函数超出调用堆栈

Question

假设我有以下轮询功能:

function pollingFunc(taskId){
  setTimeout(function() {
    $.ajax({
      url: '/endpoint',
      type: 'POST',
      data: { 'celery_task_id': taskId },
      success: function(response){
        if(response.celery_ready) {
          console.log('CELERY IS READY')
        } else {
          console.log('polling')
          pollingFunc(response.task_id)
        }
      }
    })
  }, 5000);
}

当我调用它时，成功回调永远不会被调用，或者可能会被调用，但我的 console.logs 永远不会出现。相反，过了一会儿我得到了

Uncaught RangeError: Maximum call stack size exceeded

所以我的函数正在递归运行，但是按照我想要的方式运行。我希望在递归调用开始之前至少能在控制台中打印控制台日志，但事实并非如此。我已经确认我的后端端点运行正常并且正在返回 json，因此我怀疑我的 javascript 代码中缺少某些内容。大家有什么想法吗？

Answer 1

我不擅长js，但是我在setTimeout方面遇到了问题。根据w3school :

Display an alert box after 3 seconds (3000 milliseconds):

setTimeout(function(){ alert("Hello"); }, 3000);

所以我认为您的代码在调用服务器之前等待 5 秒，然后每次调用它，并在得到答案时立即调用它。

=> 要解决您的问题，请将 setTimeout 放入 success 函数中。

function pollingFunc(taskId){
    $.ajax({
      url: '/endpoint',
      type: 'POST',
      data: { 'celery_task_id': taskId },
      success: function(response){
        if(response.celery_ready) {
          console.log('CELERY IS READY')
        } else {
          console.log('polling')
          setTimeout(function() {
            pollingFunc(response.task_id);
          }, 5000);
        }
      });
  }

顺便说一句，为了不重现此类问题，我还将按照JQuery documentation的建议单独声明该函数。 .