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

On the event of a form submit, I have a jquery ajax function that queries for the amount of data uploaded from a file that I can use in making a progress bar. This is my js file:

在表单提交的情况下,我有一个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

});

So, the user will use the form to select the file then click submit. This all happens just fine. The form submits, the file is uploaded, and the progress shows just fine when I open my ajax view in a separate tab and keep refreshing it. What I don't understand is why the update_progress_bar function runs once until I stop the page. I'll upload a file but until I click the 'x' on my browser I won't get any of the 'hit success' in my console. After I hit stop, the console spits out the 'hit success ' plus the counter. But I shouldn't have to hit stop to do this. I need this to work when the file is uploading.

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

Any ideas what my problem is?

有什么想法我的问题是什么?

EDIT

Not sure if it makes a difference, but I am doing all this on a django development server. Which I think shouldn't have a problem with two XMLHTTPRequests in the same session.

不确定它是否有所作为,但我在django开发服务器上做了所有这些。我认为在同一会话中两个XMLHTTPRequests不应该有问题。

3 个解决方案

#1

Try this:

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

});

#2

As it stands, the code looks good to me. I would add some more console logging to make sure the ajax call is returning with the status you expect:

就目前而言,代码对我来说很好。我会添加一些控制台日志记录,以确保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

In the ajax function I set the async setting to false:

在ajax函数中,我将async设置为false:

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

This has solved the problem. I have no idea how. From what I understand, this setting forces the ajax request to wait until all other http requests are finished before allowing it to continue. With that being the case, I have no idea how this works. I'll keep from answering my own question in case someone knows why this is working this way...

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

#1