Jquery 设置ajax调用返回数据的最短时间
单击一个按钮,我正在运行一个ajax请求。我还将body类更改为执行css动画(为ajax数据腾出空间),大约需要1.5秒。我不希望ajax在此之前返回数据 我的ajax请求如下所示:Jquery 设置ajax调用返回数据的最短时间,jquery,ajax,css-animations,Jquery,Ajax,Css Animations,单击一个按钮,我正在运行一个ajax请求。我还将body类更改为执行css动画(为ajax数据腾出空间),大约需要1.5秒。我不希望ajax在此之前返回数据 我的ajax请求如下所示: function ajax(url) { $.ajax({ url: API.hostname + url, dataType: "json", complete: function() { $html.css("cursor", "
function ajax(url) {
$.ajax({
url: API.hostname + url,
dataType: "json",
complete: function() {
$html.css("cursor", "default");
},
success: function (response) {
callback(response);
}
});
}
理想情况下,我运行一个计时器,检查它是否已满1.5秒,如果已满,则运行回调。你有什么想法吗?我基本上希望避免在动画完成之前加载数据的情况。您只需编写一个ajax done方法,该方法仅在发出请求后才会启动 来自jQuery网站的官方文档:
以下是我的解决方案:
function startanim(){
//here is the script for starting the animation
}
function stopanim(){
//here is the script for stopping the animation
}
function ajax(url) {
startanim();//start your animation before the ajax call
//set a timeout if you want to set the minimum time for animation
setTimeout(function (){
$.ajax({
url: API.hostname + url,
dataType: "json",
complete: function() {
$html.css("cursor", "default");
},
success: function (response) {
callback(response);
},
error : function (a){
alert(a.responseText); //trap the cause of error
}
}).done(function (){
stopanim();//stop your animation after the ajax done
});
},"1400",url);
//timeout is 1400ms. Let's say that the ajax needs 100ms to complete, so it will be 1500ms.
}
这就是交易。您将在启动ajax的同时启动动画,并且在动画完成之前不会启动回调。所以
|--------------------------------|
animation starts animation completes
|---------------|----------------|
ajax starts ajax completes callback fires
或
因此,如果ajax在动画完成之前返回,它将等待动画,如果ajax在动画之后返回,它将立即启动。这在某种程度上是两全其美的,因为动画始终受到尊重,用户不必等待惰性ajax请求(动画之后发生的请求)
谢谢这对我不起作用。我需要确保回调(响应)是在我看到的请求至少1.5秒后返回的。在这种情况下,您可以使用.delay()@JCHASE11您确定您的ajax将始终在1.5s内完成吗?我认为您应该在ajax调用之前开始动画,然后在ajax完成后结束动画。不,动画是在1.5中完成的ajax请求可能需要200毫秒到4秒的时间。我想确保它在1.5秒之前不可见。在ajax成功后将超时设置为1.5秒event@JCHASE11你解决了吗?这不理想。您正在让用户等待最长的时间来处理动画。问题不清楚。现在问题已更新,因此(可能)您不知道问题是如何更新的(更新前)。对于更新的问题,只需替换我答案中的
setTimeout
。这将是@Tommyixi想要的。
|--------------------------------|
animation starts animation completes
|---------------|----------------|
ajax starts ajax completes callback fires
|--------------------------------|
animation starts animation completes
|------------------------------------------|
ajax starts ajax completes / callback fires
function ajax(url) {
// init cb to null
var cb = null;
// start the 1.5 second long animation
animationStart();
// set timeout for 1.5 seconds
setTimeout(function(){
// cb will be set to a function if the ajax has completed already
if(cb){
// ajax has already completed
cb(); // run the function set by ajax success
}else{
// ajax has not yet completed
cb = true; // set value to true
}
}, 1500);
// start the ajax request
$.ajax({
url: API.hostname + url,
dataType: "json",
complete: function() {
$html.css("cursor", "default");
},
success: function (response) {
// the cb will be set by the timeout if the animation is complete already
if(cb){
// animation was already complete, fire the callback right away
callback(response);
}else{
// animation is not yet complete, set cb to a function, so the callback can
// run it when the animation is complete
cb = function(){ callback(response); };
}
}
});
}