jQuery 我应该使用多个 ajaxStart/ajaxStop 处理

Question

也许没有什么区别，但其中一个比另一个更好(或者可能是比两者更好的神秘“第三种”方式!)...

<小时/>

第一:

var startTime;

$(document).ready(function() {

    $("#lbl_ajaxInProgress").ajaxStart(function() {
        // store the current date/time...
        startTime = new Date();
        // update labels
        $(this).text('Yes');
        $("#lbl_ajaxCallTime").text("-");
    });

    $("#lbl_ajaxInProgress").ajaxStop(function() {
        // update labels
        $(this).text('No');
        $("#lbl_ajaxCallTime").text(myFunctionThatCalculatesTime(startTime));
    });

});

<小时/>

第二个:

var startTime;

$(document).ready(function() {

    $("#lbl_ajaxInProgress").ajaxStart(function() {
        // update labels
        $(this).text('Yes');
    });

    $("#lbl_ajaxInProgress").ajaxStop(function() {
        // update labels
        $(this).text('No');
    });

    $("#lbl_ajaxCallTime").ajaxStart(function() {
        // store the current date/time...
        startTime = new Date();
        // update labels
        $(this).text("-");
    });

    $("#lbl_ajaxCallTime").ajaxStop(function() {
        // update labels
        $(this).text(myFunctionThatCalculatesTime(startTime));
    });

});

Answer 1

一个有趣的事实是ajaxStart等实际上只是jQuery事件。例如:

$("#lbl_ajaxInProgress").ajaxStart(function() {
  // update labels
  $(this).text('Yes');
});

相当于:

$("#lbl_ajaxInProgress").bind("ajaxStart", function() {
  // update labels
  $(this).text('Yes');
});

这意味着您还可以将命名空间附加到 ajaxStart/ajaxStop 等。这也意味着您可以执行以下操作:

$("#lbl_ajaxInProgress").unbind("ajaxStart ajaxStop");

你还可以这样做:

$("#lbl_ajaxInProgress").bind("ajaxStart.label", function() {
  // update labels
  $(this).text('Yes');
});

$("#lbl_ajaxInProgress").bind("ajaxStop.label", function() {
  // update labels
  $(this).text('No');
});

然后:

$("#lbl_ajaxInProgress").unbind(".label");

很酷吧？