如何在特定的Ajax调用上调用.ajaxStart()

我在站点的文档上有一些ajax调用,根据ajax状态显示或隐藏进度条

$(document).ajaxStart(function(){ $('#ajaxProgress').show(); }); $(document).ajaxStop(function(){ $('#ajaxProgress').hide(); }); 

我想基本overwirte这些方法在网站的其他部分,很多快速的小Ajax调用,并不需要popup进度条。 我想附加他们或插入其他$ .getJSON和$ .ajax调用。 我已经试图链接他们,但显然这是不好的。

 $.getJSON().ajaxStart(function(){ 'kill preloader'}); 

您可以使用自定义命名空间来绑定ajaxStart和ajaxStop:

 $(document).bind("ajaxStart.mine", function() { $('#ajaxProgress').show(); }); $(document).bind("ajaxStop.mine", function() { $('#ajaxProgress').hide(); }); 

然后,在网站的其他部分,您将您的.json调用之前临时解除绑定:

 $(document).unbind(".mine"); 

从这里得到的想法,同时寻找答案。

编辑:我还没有时间来testing它,唉。

如果你把它放在处理ajax动作的函数中,它只会在适当的时候绑定它自己:

 $('#yourDiv') .ajaxStart(function(){ $("ResultsDiv").hide(); $(this).show(); }) .ajaxStop(function(){ $(this).hide(); $(this).unbind("ajaxStart"); }); 

此外,如果您想禁用.ajaxStart().ajaxStop()调用,则可以在.ajax()请求中将global选项设置为false ;)

在这里看到更多: 如何在特定的Ajax调用上调用.ajaxStart()

选项对象中有一个属性.ajax()称为全局。

如果设置为false,则不会触发该调用的ajaxStart事件。

  $.ajax({ url: "google.com", type: "GET", dataType: "json", cache: false, global: false, success: function (data) { 

不幸的是,ajaxStart事件没有任何额外的信息,你可以用来决定是否显示animation。

无论如何,这是一个想法。 在你的ajaxStart方法中,为什么不说在200毫秒后开始animation? 如果ajax请求在200毫秒内完成,则不显示任何animation,否则显示animation。 代码可能如下所示:

 var animationController = function animationController() { var timeout = null; var delayBy = 200; //Number of milliseconds to wait before ajax animation starts. var pub = {}; var actualAnimationStart = function actualAnimationStart() { $('#ajaxProgress').show(); }; var actualAnimationStop = function actualAnimationStop() { $('#ajaxProgress').hide(); }; pub.startAnimation = function animationController$startAnimation() { timeout = setTimeout(actualAnimationStart, delayBy); }; pub.stopAnimation = function animationController$stopAnimation() { //If ajax call finishes before the timeout occurs, we wouldn't have //shown any animation. clearTimeout(timeout); actualAnimationStop(); } return pub; }(); $(document).ready( function() { $(document).ajaxStart(animationController.startAnimation); $(document).ajaxStop(animationController.stopAnimation); } ); 

使用beforeSend或在这样的Ajax调用完成callback函数就像这样…实例在这里https://stackoverflow.com/a/34940340/5361795

消息源代码

使用本地范围的Ajax事件

  success: function (jQxhr, errorCode, errorThrown) { alert("Error : " + errorThrown); }, beforeSend: function () { $("#loading-image").show(); }, complete: function () { $("#loading-image").hide(); } 

如果要在决定要执行什么操作之前对该请求进行插入,请使用ajaxSend和ajaxComplete。 看到我的答复在这里: https : //stackoverflow.com/a/15763341/117268

 <div class="Local">Trigger</div> <div class="result"></div> <div class="log"></div> $(document).ajaxStart(function() { $( "log" )text( "Trigger Fire successfully." ); }); $( ".local" ).click(function() { $( ".result" ).load("c:/refresh.html."); }); 

只要经过这个例子,你会有一些想法。当用户点击Local类的元素并发送Ajax请求时,会显示日志消息。

我有一个解决scheme。 我设置了一个名为showloader的全局jsvariables(默认设置为false)。 在你想要显示的任何函数中,加载器只需设置为true,然后再进行ajax调用。

 function doAjaxThing() { showloader=true; $.ajax({yaddayadda}); } 

那么我的头部有以下几个部分。

 $(document).ajaxStart(function() { if (showloader) { $('.loadingholder').fadeIn(200); } }); $(document).ajaxComplete(function() { $('.loadingholder').fadeOut(200); showloader=false; });