Javascript - Loop продолжает работать после обновления страницы

Question

Сегодня одна из самых странных вещей, которые я когда-либо видел. У меня есть петля на странице, которая выполняет синхронный запрос ajax для каждого элемента цикла. Так как это затягивало слишком долго, я решил остановить цикл, обновив страницу.

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

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

Я также заметил, что некоторые вещи цикла не выполняются. Он должен был время от времени менять страницу данных, и она должна была быть написана на консоли javascript, и то, и другое не происходит после обновления страницы, вызовы ajax все еще продолжаются.

Вот код, в котором содержится цикл:

//This variable will contain a reference to the datatable 
var oTable; 
var isWorking=false; 
//Change the datatables page 
function changeTablePage(oTable, page, clear){ 
    if(clear){ 
     oTable.fnClearTable(); 
     oTable.fnDraw(); 
    } 
    oTable.fnPageChange(page); 
} 

//This part is inside a document.ready block 
    $(document).on("click", ".validation-all-click", function(event){ 
     if(!isWorking){ 
      isWorking=true; 
      //saves the current page, will be needed for later 
      var page=oTable.fnPagingInfo().iPage; 
      var numberPage=0; 
      var done=false; 
      while(!done){ 
       console.log("page: "+numberPage); 
       changeTablePage(oTable, numberPage, false); 
       var nNodes = oTable.fnGetNodes(); 
       var len=nNodes.length; 
       $('.validation-click', nNodes).each(function(index, value){ 
        //id of the element to be validated 
        var id=$(value).data("rowid"); 
        //Calls the validation url 
        $.ajax({ 
         url: "/validate?id="+id, 
         async: false 
        }); 
       }); 
       //if the datatables page has 0 items, then it's done 
       if(len==0){ 
        done=true; 
       } 
       numberPage++; 
      } 
      //goes back to the original page 
      changeTablePage(oTable, page, true); 
      isWorking=false; 
     } 

}); 

Я не хочу, чтобы это поведение должно произойти, но я понятия не имею о том, почему это происходит и как предотвратить его

Answer 1

Я решил, добавив переменную, которая будет остановить цикл, когда я выйти из страницы:

var stopLoop=false 
$(window).unload(function() { 
    stopLoop=true; 
}); 

обе петли теперь будет проверять, если эта переменная ложна перед выполнением кода внутри цикла. Это работает в Firefox, но не в Chrome.

- EDIT -

В конце концов я решил, редактируя код для того, чтобы сделать Ajax вызовов асинхронной и с помощью функции обратного вызова для продолжения цикла, хотя это не было простой задачей (несколько дней позже я нашел новое решение, которое позволило мне сделать все, что мне нужно, в один звонок, когда я узнал, как восстановить параметры, используемые данными datatables для извлечения данных, но это не имеет ничего общего с исходным вопросом). Итак, для будущих ссылок: ожидайте этого «странного» поведения при создании цикла с синхронными звонками ajax

Answer 2

Спасибо за рассказывая историю. Я не вижу на этом конкретного вопроса, поэтому я просто буду комментировать все, что мне хочется.

Как я понимаю, браузеру не требуется перерисовывать пользовательский интерфейс , а Работает JavaScript. Поскольку существует скрипт, блокирующий синхронный запрос ajax, возможно, следует ожидать, что вы не увидите изменений в таблице до тех пор, пока цикл не завершится.

Кроме того, возможно, браузер не обязан уничтожать страницу во время работы ее скриптов. Это объясняет, почему вы видели запросы в Firebug после обновления страницы - возможно, предыдущая копия страницы все еще работала в скрытом состоянии.

Редактировать: valepu сообщает в комментарии ниже, что таблица изменяется во время работы скрипта. Хорошо. Возможно, браузер может определить, что он может перерисовать интерфейс во время вызова ajax (что не влияет на среду JavaScript). valepu также разъясняет, что визуальные обновления останавливаются после обновления страницы, хотя запросы продолжают исчезать. Это также согласуется с идеей, что браузер только что скрыл предыдущую страницу (пока она не закончится) и загрузила новую копию страницы при обновлении.

Что касается предотвращения этого: самым надежным способом было бы использовать асинхронные запросы или иначе давать между запросами. Извините, ребята.