[英]Showing a loading div during a jQuery ajax call
Im trying to show a loading div while waiting for an ajax call to complete. 我试图在等待ajax调用完成时显示加载div。 I have tried a couple of methods but cant seem to get anything to work consistently.
我尝试了几种方法,但似乎无法使任何东西始终如一地工作。
with my current code it works if i have a break point on the function that shows the div once the ajax is complete. 用我当前的代码,如果我在ajax完成后显示div的函数上有一个断点,则可以正常工作。
var https = 'https://www.googleapis.com/calendar/v3/calendars/'; function HideCheckShowLoading(checkId) { $("#check_" + checkId).hide('slow', function() { $("#loading_" + checkId).show('slow'); }); }; function HideLoadingShowCheck(checkId) { $("#loading_" + checkId).finish().hide('slow', function() { $("#check_" + checkId).finish().show('slow'); }); }; $(document).ready(function() { $('#get').click(function() { HideCheckShowLoading(1); $.ajax({ url: https, dataType: 'jsonp', type: "GET", success: function(response) { //do something }, error: function() { //do something else } }).done(function() { HideLoadingShowCheck(1) }); }); $('#get2').click(function() { HideLoadingShowCheck(1); }); });
#check_1 { background-color:red; } #loading_1 { background-color:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="check_1">Check</div> <div hidden id="loading_1">LOADING</div> <button id="get">Get</button> <button id="get2">Get2</button>
What i would like to happen is, 我想发生的是
As said I have tried a few methods that i have found but i repeatedly get stuck with just the loading div shown 正如我所说的,我尝试了一些发现的方法,但是我一再被显示的加载div卡住了
Thanks 谢谢
I believe you may be slightly over-complicating things here. 我相信您在这里可能会使事情变得有些复杂。 Something simple like this would suffice:
这样简单的事情就足够了:
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
},
complete: HideLoadingShowCheck
});
});
If you don't want the HideLoadingShowCheck
routine to happen after success
or error
(standard behavior of complete
), you can just move a function call HideLoadingShowCheck();
如果您不希望
HideLoadingShowCheck
例程在success
或error
之后发生(标准行为complete
),则只需移动一个函数调用HideLoadingShowCheck();
into your success
and error
blocks instead of using complete
. 进入
success
和error
块,而不是使用complete
。
When you add ()
to a function name, it calls it immediately and returns the result. 将
()
添加到函数名称时,它将立即调用它并返回结果。 What you want to do is pass the function itself, not the result of the function - and you do that without the ()
. 您想要做的是传递函数本身,而不是函数的结果-并且无需
()
可以做到这一点。
There's no need for the $.when
(assuming HideCheckShowLoading() doesn't make an ajax call, the jquery animations work differently), and $.ajax
returns the promise itself, so you can update your code to: 不需要
$.when
.when(假设HideCheckShowLoading()不进行ajax调用,jQuery动画的工作方式有所不同),而$.ajax
返回promise本身,因此您可以将代码更新为:
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
}
})
//.done(HideLoadingShowCheck);
.done(function() { HideLoadingShowCheck(otherparams); })
});
});
I would change the showcheck function to add .finish()
incase it's still animating from the showhide: 我会更改showcheck函数以添加
.finish()
它仍从showhide进行动画处理:
function HideLoadingShowCheck() {
$("#loading").finish().hide('slow',function () {
$("#check").finish().show('slow');
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.