【问题标题】：jQuery should I use multiple ajaxStart/ajaxStop handlingjQuery 我应该使用多个 ajaxStart/ajaxStop 处理
【发布时间】：2010-11-06 21:50:10
【问题描述】：

也许没有区别，但任何一种都比另一种更好（或者可能是神秘的“第三种”方式都比两者都好！）...

第一：

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));
    });

});

【问题讨论】：

从 jQuery 1.8 开始，.ajaxStart() 方法只能附加到文档。
这能回答你的问题吗？ Disable ajaxStart() and ajaxStop() for a specific request

标签： jquery

【解决方案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");

很酷吧？

【讨论】：

当然是！我在这里假设，但你是说无论哪种方式都没有关系？
ajaxStart 助手相当于 click 助手，它只是委托绑定，所以是的，这两种方式都没有关系。
从 jQuery 1.8 开始，.ajaxStart() 方法只能附加到文档。
这个解决方案现在不起作用，因为 jQuery 带来了新规则。

【解决方案2】：

以这种方式使用 Ajax 调用 ....

<!DOCTYPE html>
<html lang="en">
<head>
<title>Shouting Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
	src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
</head>
<body>
	<button type="submit" class="btn btn-default"
		onclick="ajaxRequest(this);">
		<i class="fa fa-refresh"></i> Ajax Call
	</button>
	<script>
  function ajaxRequest(id) 
    {
    	 // ajax request
        $.ajax({
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<p>This is echoed the response in HTML format</p>',
                delay: 600
            },
            dataType: 'html',
            beforeSend: function() { 
           	    //  alert("start");
				$(id).find('i').addClass('fa-spin');
			},
            success: function(data) {
                alert('Fired when the request is successfull');
            },
            complete:function(){  
                 //   alert("stop");
				$(id).find('i').removeClass('fa-spin');
			}
        });
}</script>
</body>
</html>

【讨论】：