Question

我正在使用此功能通过AJAX返回搜索结果。但是，它会在搜索时杀死移动浏览器。如果我将它设置为＆＃39; async：false＆＃39;但这意味着我无法加载图标。

我无法在网上找到任何可以说明为什么在桌面上工作正常时无法在移动设备上运行的内容。

有什么想法吗？

(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

我能够通过向我的页面添加一个带有加载器ID的单独“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);

AJAX async：true在移动浏览器上中断网站

2 个答案: