setTimeout 直到我停止页面才开始答案

【问题标题】：setTimeout doesn't start until I stop the pagesetTimeout 直到我停止页面才开始
【发布时间】：2013-05-03 15:29:10
【问题描述】：

在提交表单时，我有一个 jquery ajax 函数，用于查询从文件上传的数据量，可用于制作进度条。这是我的 js 文件：

var submitted = '';
var counter = 0;

$('#webfileuploadform').submit(function(){

    if(submitted == 'submitted') return false; // prevents multiple submits

    var freq = 1000; // freqency of update in ms
    var progress_url = '/upload_progress/' + $('#id_progress_id').val(); // ajax view serving progress info

    update_progress_bar();

    function update_progress_bar(){
        $.ajax({
            dataType:"json",
            url: progress_url,
            success: function(data){
                    counter ++
                console.log('hit success ' + counter);
            },
            complete: function(jqXHR, status){
                if (status == 'success'){
                    console.log('hit complete', status == success')
                } else {
                    console.lot('hit complete', status == something else')
                }
            }
        });
        setTimeout(function(){update_progress_bar()}, freq);
    }

    submitted = 'submitted'; // marks form as submitted

});

因此，用户将使用表单选择文件，然后单击提交。这一切都发生得很好。表单提交，文件上传，当我在单独的选项卡中打开我的 ajax 视图并不断刷新它时，进度显示得很好。我不明白为什么 update_progress_bar 函数会运行一次，直到我停止页面。我将上传一个文件，但在我单击浏览器上的“x”之前，我不会在控制台中获得任何“命中成功”。在我点击停止后，控制台吐出“命中成功”加上计数器。但我不应该停下来做这件事。文件上传时我需要它来工作。

任何想法我的问题是什么？

编辑

不确定它是否有所作为，但我在 django 开发服务器上完成所有这些工作。我认为在同一个会话中使用两个 XMLHTTPRequest 应该没有问题。

【问题讨论】：

是ar freq=1000吗？或var freq=1000
同一会话中有两个 XMLHTTPRequest。
你真的应该使用 setTimeout 而不是 setInterval。返回 Ajax 调用时重新触发超时。警报也是一个坏主意，请使用控制台。而且您正在使用获取请求，因此希望您设置了正确的标头，因此不会缓存 ajax 调用。什么是上传文件？
console.log($.ajaxSettings.async); 带给你什么？
(O.T.) 将$variablename 用于对象... 99% 的程序员可能认为您存储的是对象而不是存储标志 :)

标签： javascript jquery ajax

【解决方案1】：

试试这个：

var $submitted = '';

$('#webfileuploadform').submit(function(){

    if($submitted == 'submitted') return false; // prevents multiple submits

    var freq = 1000; // freqency of update in ms

    update_progress_bar();

    function update_progress_bar(){
        var progress_url = '/upload_progress/' + $('#id_progress_id').val(); // ajax view serving progress info

        $.ajax({
            dataType:"json",
            url: progress_url,
            success: function(data){
                console.log("hit success");
            },
            complete:function(jqXHR, status) {
                if (status == 'success') {
                    setTimeout(update_progress_bar, freq);
                }
            }
        });
    }

    $submitted = 'submitted'; // marks form as submitted

});

【讨论】：

这个函数迭代一次，就这样。我还尝试将您的行更改为“setTimeout(function(){update_progress_bar()},freq)，但这也不起作用。
在complete回调函数中检查status的值。也许有一个错误，这就是为什么它只被调用一次。请参阅 JoshN 的建议。

【解决方案2】：

就目前而言，代码对我来说看起来不错。我会添加更多控制台日志记录，以确保 ajax 调用以您期望的状态返回：

complete:function(jqXHR, status) {
    console.log('got to complete, status: ', status);
    if (status == 'success') {
         console.log('status is success, calling setTimeout.');
         setTimeout(update_progress_bar, freq);
    }
}

【讨论】：

【解决方案3】：

在 ajax 函数中，我将异步设置设置为 false：

$.ajax({
    async: false,
    ...
});

这解决了问题。我不知道怎么做。据我了解，此设置强制 ajax 请求等到所有其他 http 请求完成后才允许它继续。在这种情况下，我不知道这是如何工作的。我将不再回答我自己的问题，以防有人知道为什么会这样......

【讨论】：