Question

今天我见过的一件最奇怪的事情刚刚发生。我在页面中有一个循环，它为循环的每个元素执行同步ajax请求。由于花了太长时间我决定通过刷新页面来停止循环。

当页面加载时我无法点击页面的任何元素，所以我检查了Firebug控制台，我看到前一个循环的ajax调用仍在进行（循环设置为在我点击后启动在一个链接上，所以它一旦页面加载就无法启动）。要停止循环，我必须关闭当前选项卡并以新的方式打开我的页面。

值得一提的是，我在该页面上有一个数据表表，并且我已启用保存表状态的选项，这可能会干扰我的代码（循环本身不是数据表初始化的一部分，虽然它使用表格中的数据。）

我也注意到循环中的一些事情还没有完成。它应该不时地更改数据表的页面，并且应该在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;
});

两个循环现在将在循环内执行代码之前检查此变量是否为false。这适用于Firefox但不适用于Chrome。

- 编辑 -

最后我通过编辑代码来解决，以使ajax调用异步并使用回调函数继续循环，虽然这不是一项简单的任务（几天后我发现了一个新的解决方案，允许我当我发现如何恢复数据表用于检索数据的参数时，在一次调用中完成所需的所有操作，但这与原始问题无关）。因此，对于将来的引用：在使用ajax同步调用进行循环时期望这种“奇怪”的行为

Answer 2

感谢您分享您的故事。我在帖子中没有看到任何具体问题，所以我只会评论我的感受。

据我了解，在 JavaScript运行时，浏览器不需要重绘UI 。由于在同步ajax请求上存在脚本阻塞，因此可能需要在循环结束之前看不到对表的更改。

此外，也可能是浏览器在脚本运行时不需要销毁页面。这可以解释为什么您在刷新页面后在Firebug中看到了请求 - 也许页面的上一个副本仍然处于隐藏状态。

编辑：valepu在下面的注释中报告，该表在脚本运行时确实发生了变化。没关系。浏览器可能确定它可以在ajax调用期间重绘UI（这不会影响JavaScript环境）。 valepu还澄清了刷新页面后视觉更新停止，尽管请求继续消失。这也与浏览器刚刚隐藏上一页（直到完成）并在刷新时加载页面的新副本的想法一致。

至于如何防止它：最可靠的方法是使用异步请求，或以其他方式在请求之间产生。对不起，大家。

Javascript - 循环在页面刷新后继续运行

2 个答案: