Javascript setTimeout在我停止页面之前不会启动

在表单提交事件中，我有一个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视图并不断刷新它时，进度显示得很好。我不明白的是为什么更新进度条函数只运行一次，直到我停止页面。我将上载一个文件，但在我单击浏览器上的“x”之前，我不会在控制台中获得任何“命中成功”。在我点击停止按钮后，控制台会弹出“点击成功”和计数器。但我不应该为了做这件事而停下来。我需要这个工作时，文件上传

知道我的问题是什么吗

**

编辑 **

我不确定这是否有什么不同，但我是在django开发服务器上完成这些工作的。我认为在同一个会话中，两个XMLHTTPRequests不应该有问题。

试试这个：

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

});

---

目前看来，代码对我来说很好。我将添加更多的控制台日志记录，以确保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);
    }
}

---

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

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

---

这就解决了问题。我不知道怎么做。据我所知，此设置强制ajax请求等待所有其他http请求完成后才能继续。在这种情况下，我不知道这是怎么回事。我不会回答我自己的问题，以防有人知道为什么会这样…

是ar freq=1000吗？或者var freq=1000在同一会话中有两个XMLHTTPRequests。您应该真正使用setTimeout而不是setInterval。返回Ajax调用时重新触发超时。此外，警报是一个坏主意，使用控制台。您使用的是get请求，所以希望您设置了正确的头，这样ajax调用就不会被缓存。上传文件是什么？console.log$.ajaxSettings.async；给你？O.T.对对象使用$variablename。。。99%的程序员可能认为您存储的是一个对象，而不是一个标志：这会在函数中迭代一次，就是这样。我还尝试将您的行更改为setTimeoutfunction{update_progress_bar}，freq，但这也不起作用。也许有个错误，这就是为什么只调用一次。见乔森的建议。