如何给ajax加载程序超时

Question

我在为加载器添加计时器时遇到问题，
我希望加载器调用函数需要更长的时间。

我有$.ajaxSetup，用于加载像这样的加载程序

a.ajaxSetup({
headers: {"X-CSRF-TOKEN": a('meta[name="csrf-token"]').attr("content")},
beforeSend: function(){
a('.page-overlay').addClass("loading");
},
complete: function() {
a('.page-overlay').removeClass("loading");
},
});

然后我这样调用$.ajaxSetup：

a(document).on('click', 'a#details_transactions', function(e){
var d = a(this).data('pid'),
s = a('#CallModal'),
w = a('.modal-content');
e.preventDefault(),
a.post(transaction_details,{_token: csrf_token, pid: d}).done((e) => {
s.modal('show');console.log(e);w.html(e)
}).fail((e)=>{s.modal('hide');Toast.fire({icon: 'error',title: 'Something Wrong. Please try again!'})});
});

如果是这样的话，我该如何添加一个计时器，使加载程序看起来需要很长时间才能加载

已编辑

我试着在之间使用setTimeout

s.modal('show');console.log(e);w.html(e)

然后

setTimeout(function() {
s.modal('show');console.log(e);w.html(e)
},2000)

但删除timeOut之后的加载程序显示
我认为.done有问题，因为这个调用是在.done函数之后进行的。

那么，我应该用$.ajax和success:来给出timer吗？

Answer 1

所以您有$.ajaxSetup()，它适用于您可能拥有的所有ajax请求。。。

但是对于下面的特定请求，您希望加载程序被延迟。

我认为您的解决方案是在$.post()中使用global参数，以避免$.ajaxSetup()在该参数上触发。

是否为此请求触发全局Ajax事件处理程序^Ref

因此，您可以在这里以不同的方式管理.loading，而不会影响其他内容。

a(document).on('click', 'a#details_transactions', function(e){
e.preventDefault();

var d = a(this).data('pid'),
s = a('#CallModal'),
w = a('.modal-content');

a('.page-overlay').addClass("loading");  // add the loading class here

// Notice the global: false here!
a.post({
url: transaction_details,
data: {_token: csrf_token, pid: d},
global: false
}).done((e) => {

// Use the setTimeout here
setTimeout(function(){
s.modal('show');console.log(e);w.html(e);
a('.page-overlay').removeClass("loading");  // remove the loading class here
},2000);
}).fail((e)=>{
s.modal('hide');
a('.page-overlay').removeClass("loading");  // remove the loading class here too!
Toast.fire({icon: 'error',title: 'Something Wrong. Please try again!'})
});
});