jquery 被异步调用延迟

Question

请找到下面的代码sn-p：

HTML：

<div>
<span> First Name : <input type="text" id="firstName" name="First Name"/></span>
</div>
<br/>
<div>
<span>Student Id: <input type="text" id="studentId" name="studentId"/></span>
<span>Teacher Id: <input type="text" id="teacherId" name="teacherId"/></span>
</div>
<br/>
<div>
<span>Student Name : <input type="text" id="stdLastName" name="stdLastName"/></span>
<span>Student Age :<input type="text" id="stdAge" name="stdAge"/></span>
</div>
<br/>
<div>
<span>Teacher Name : <input type="text" id="tchrLastName" name="tchrLastName"/></span>
<span>Teacher Age : <input type="text" id="tchrAge" name="tchrAge"/></span>
</div>
<br/>
<input type="button" value="Submit" id="submit"/>

Javascript：

    $('#firstName').focus();

var d1= new $.Deferred();

$('#firstName').blur(populatePage());

//called on blur of first name 
function populatePage() {
    $.when(populateStdDetails(),populateTchrDetails()).done(function(resp1, resp2){
          $('#stdLastName').val(resp1[0].stdName);
        $('#stdAge').val(resp1[0].age);
        $('#tchrLastName').val(resp2[0].stdName);
        $('#tchrAge').val(resp2[0].age);
            console.log('All details populated....');
        d1.resolve();

  });
  return d1;
}  

//first ajax call
function populateStdDetails() {
    if($('#firstName').val() != '' && $('#studentId').val() !='') {
        return $.ajax({
        url : '/someURL?studentId='+studentId+'&firstName='+firstName,
      type :'GET',
      contentType:'json'
    });
    }
}

//second ajax call
function populateTchrDetails() {
    if($('#firstName').val() != '' && $('#teacherId').val() !='') {
        return $.ajax({
        url : '/someURL?teacherId='+teacherId+'&firstName='+firstName,
      type :'GET',
      contentType:'json'
    });
    }
}

$('#submit').click(function(e){
    //wait for the ajax calls to be completed
  $.when(populatePage()).done(function(e){
    console.log('All done !!!!');
    //Move to next page;
  });
});

First Name 文本字段附加了一个 onblur 事件，在通常情况下可以正常工作，但是当焦点位于“First Name”并单击“Submit”时，将调用提交函数而不是等待 onblur 事件发生完成。

Answer 1

您在超时函数中将 deferred.resolve 放置在错误的位置。这样做：

function doSomething(deffered) {
    $('#log').append('doSomething');
    deferred.resolve();
    return deferred;
};

function ajaxRequests1(deferred) {
    setTimeout(function(){
        $('#log').append('......ajaxRequests1');
        deferred.resolve(); 
    }, 1000);
    return deferred;
};

function ajaxRequests2(deferred) {
   setTimeout(function(){
        $('#log').append('.....ajaxRequests2');
        deferred.resolve();
   }, 5000); 
   return deferred;
};

var func1 = function () {
        var promise = new $.Deferred();
        ajaxRequests1(promise);
        return promise;
    }

var func2 = function () {
        var promise = new $.Deferred();
        ajaxRequests2(promise);
        return promise;
}

var stepFinal = function() {
       var promise = new $.Deferred();
       doSomething(promise);
       return promise;
}

$.when(func1().promise(), func2().promise())
    .done(function () {
            stepFinal().done();
    });

Answer 2

好的，如果您希望在焦点离开#firstname 时调用populatePage()，并且如果用户还单击了提交按钮并且您希望提交操作等待该模糊操作完成，您可以这样做：

$('#firstName').blur(function(e) {
    // call populatePage and set the resulting promise as a data item so
    // the submit handler can get access to it
    var self = $(this);
    var p = populatePage();
    self.data("blurPromise", p);

    // when this promise is done, clear the blurPromise
    p.always(function() {
        self.removeData("blurPromise");
    });
});

//called on blur of first name 
function populatePage() {
    return $.when(populateStdDetails(),populateTchrDetails()).done(function(resp1, resp2){
        $('#stdLastName').val(resp1[0].stdName);
        $('#stdAge').val(resp1[0].age);
        $('#tchrLastName').val(resp2[0].stdName);
        $('#tchrAge').val(resp2[0].age);
        console.log('All details populated....');
    });
}  

//first ajax call
function populateStdDetails() {
    if($('#firstName').val() != '' && $('#studentId').val() !='') {
        return $.ajax({
            url : '/someURL?studentId='+studentId+'&firstName='+firstName,
            type :'GET',
            contentType:'json'
        });
    } else {
        // just return already resolved promise
        return $.when();
    }
}

//second ajax call
function populateTchrDetails() {
    if($('#firstName').val() != '' && $('#teacherId').val() !='') {
        return $.ajax({
            url : '/someURL?teacherId='+teacherId+'&firstName='+firstName,
            type :'GET',
            contentType:'json'
        });
    } else {
        return $.when();
    }
}

$('#submit').click(function(e){
    // get blur promise or dummy resolved promise
    var p = $("#firstName").data("blurPromise") || $.when();
    p.then(function() {
        // do your submit logic here
        // The onBlur handler is done now
    });
});

我在您的承诺处理代码中更新的内容：

1. 直接使用 $.ajax() 承诺，而无需将它们包装在另一个承诺中。
2. 直接使用 $.when() 承诺，而无需将它们包装在另一个承诺中。
3. 当使用if 语句来决定是否执行异步操作时，通常最好在else 分支中也返回一个promise，这样您的函数始终返回一个promise。如果在 else 子句中没有其他事情可做，那么在 jQuery 中返回已解决的承诺的捷径就是 return $.when();。
4. 请注意，.done() 是 jQuery 特定的，而不是标准的承诺行为。如果您已经在使用 jQuery 3.x 或更高版本，那么您可能应该切换到 .then()，然后您的 Promise 就会像 Promise 标准一样运行。