AJAX async:true 中断移动浏览器上的站点

Question

我正在使用此函数通过AJAX返回搜索结果。但是，它会在搜索中杀死移动浏览器。如果我将其设置为"async：false"，它可以工作，但这意味着我不能有加载图标。

我在网上找不到任何内容来表明为什么这在移动设备上不起作用，而它在桌面上工作正常。

有什么想法吗？

(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);

Answer 1

我能够通过向我的页面添加一个单独的 "loader"div 来解决这个问题，并将加载类添加到其中。代码现在如下所示：

(function($) {
$(document).ready(function() {

$("#filter").on('keyup input', function(){
delay(function(){
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type : 'post',
url : myajax.ajaxurl,
async: true,
data : {
action : 'load_search_results',
query : query
},
beforeSend: function() {
input.prop('disabled', true);
$('#loader').addClass('loading');
},
success : function( response ) {
input.prop('disabled', false);
$('#loader').removeClass('loading');
content.html( response );
myPluginsInit();
}
});
return false;
}, 700 );
});
});
})( jQuery );

Answer 2

您的问题仍在您的keyup input处理程序中。我不确定函数delay在哪里声明(我假设它是围绕setTimeout的一些包装器)。然而，这并不重要。

问题是处理程序会针对每个输入和 keyup 事件触发。"延迟"就在里面。所有"延迟"所做的只是在进行 ajax 调用之前"等待"，但仍会为每个键控和输入事件创建 ajax 调用。

这意味着正在创建大量 ajax 调用，并且在移动平台上这是一个问题。我不确定何时(或多久)需要调用服务器，但要了解我在说什么，只需添加我在下面包含的行：

(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
console.log('handling keyup or input') // add this line and watch them stack up
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);