代码之家 › 专栏 › 技术社区 › Sanoob

javascript中的非阻塞代码问题

blocking ajax jquery javascript

Sanoob · 技术社区 · 11 年前

我试图制作一个暴力投票脚本。

$('#vote').click(function(e) {                                      
    var noOfvotes = 0;
    var noOfattempt =0;
    var noOffail =0;

    for(var i =0 ; i<500;i++){
        $.ajax({
            url: 'http://www.example.com/survey/',
            type: 'POST',                   
            data: {poll: '123',
                   vote:"option3"                             
                  },
        })
            .done(function() {
                noOfvotes++;
            })
            .fail(function() {
                noOffail++;
            })
            .always(function() {
                noOfattempt++;
            });
    }
    //Result printing
    console.log('No of attempt :' + noOfattempt);       
    console.log('No of done :' + noOfvotes);
    console.log('No of fail :' + noOffail); 
});

我面临的问题是在这些ajax请求完成之前执行结果打印

No of attempt :0   
No of done :0
No of fail :0

但我需要在所有Ajax请求完成后执行这些行。我如何才能为这种情况生成阻止代码。

3 回复 | 直到 11 年前

adeneo 11 年前

将请求堆叠在数组中并使用 $.when 确定何时完成

$('#vote').click(function (e) {
    var XHR         = [],
        noOfvotes   = 0,
        noOfattempt = 0,
        noOffail    = 0;

    for (var i = 0; i < 500; i++) {
        XHR.push(
            $.ajax({
                url: 'http://www.example.com/polling/',
                type: 'POST',
                data: {
                    poll: '123',
                    vote: "option3"
                },
            }).done(function () {
                noOfvotes++;
            }).fail(function () {
                noOffail++;
            }).always(function () {
                noOfattempt++;
            })
        );
    }

    $.when.apply(undefined, XHR).done(function() {
        console.log('No of attempt :' + noOfattempt);
        console.log('No of vote :' + noOfvotes);
        console.log('No of fail :' + noOffail);
    });
});

freakish 11 年前

$('#vote').click(function(e) {                                      
    // some code

    var requests = [];
    for(var i = 0; i < 500; i++){
        requests.push($.ajax({ ... }));
    }
    $.when.apply($, requests).then(function() {
        console.log('No of attempt :' + noOfattempt);       
        console.log('No of vote :' + noOfvotes);
        console.log('No of fail :' + noOffail); 
    });
});

编辑请注意 .when 当所有请求完成作业或其中一个请求失败时激发。如果您想在所有请求完成后触发回调(无论是否有错误),请尝试以下操作:

var custom_when = function(reqs) {
    var def = $.Deferred(),
        counter = reqs.length;
    for (var i = 0; i < counter; i++) {
        reqs[i].always(function() {
            counter--;
            if (!counter) {
                def.resolve();
            }
        });
    }
    return def.promise();
};

并这样使用:

custom_when(requests).then(...);

Matt Pileggi 11 年前

将日志语句移动到.ealways中,并检查noOftry是否等于您尝试的数量。

.always(function() {
  noOfattempts++;
  if (noOfattempts === 500) {
    // we're done
  }
 })