为什么浏览器花了这么长时间用我的jQuery脚本加载我的JSON文件？

Question

我的jQuery JSON脚本有一个奇怪的问题。当我直接在浏览器中访问json文件时，它会立即加载。但是，当我使用jquery $ .getJSON加载它时，加载需要很长时间。奇怪的是，当我点击Chrome开发者控制台中的“网络”标签时，$ .getJSON内的功能立即生效。假设我已经打开开发者控制台刚刚加载的页面...我开始输入我的搜索条件输入并且没有任何反应。未列出JSON文件。然后我再次单击网络选项卡，JSON文件加载网络选项卡列表底部的文件URL。我很困惑......我做错了什么？请注意，这是在wordpress中。不确定这是否有所作为。这是我的代码......

JavaScript：

<script>
(function($){
    $('[data-search-criteria]').on('change', function(){
        $.getJSON( "<?php echo JZ_PLUGIN_URL.'/includes/service_ajax.php';?>?search="+encodeURIComponent($(this).val())+"&include-partners=false", function(data){
             $('[data-search-results]').first().text('');
              $.each(data, function(i, post){
                  $('[data-search-results]').first().append(
                    $('<div></div>').addClass('media').append(
                        $('<h3></h3>').text(post.post_title)
                    )
                  )
              });
        });
    });
})(jQuery);
</script>

如果输入'Sal'，JSON输出

[ {
    "ID": 95, 
    "post_author": "1", 
    "post_date": "2017-12-03 03:17:56", 
    "post_date_gmt": "2017-12-03 03:17:56", 
    "post_content": "[service-profile]", 
    "post_title": "Sally's Catering", 
    "post_excerpt": "", 
    "post_status": "publish", 
    "comment_status": "closed", 
    "ping_status": "closed", 
    "post_password": "", 
    "post_name": "sallys-catering", 
    "to_ping": "", "pinged": "", 
    "post_modified": "2018-02-26 16:02:50", 
    "post_modified_gmt": "2018-02-26 16:02:50", 
    "post_content_filtered": "", 
    "post_parent": 0, 
    "guid": "http:\/\/jadezebra.dev\/service\/sallys-catering\/", 
    "menu_order": 0, 
    "post_type": "service", 
    "post_mime_type": "", 
    "comment_count": "1", 
    "filter": "raw"
} ]

Answer 1

change事件仅在响应某些操作时触发，例如焦点更改或单击（它还取决于浏览器）。如果你想要一个事件，每次用户修改输入（无论是键盘，鼠标，上下文菜单......），然后使用input event。

关于检索本身（即$.getJSON）你无能为力，除非你让服务器以块的形式返回数据：那么你只会得到前10个结果（例如），并且需要发出下一个Ajax请求（使用页面参数）获取接下来的10个结果等。显然这需要更改PHP代码，应该知道新的页面参数和块大小，并相应地进行查询（在MySql中你会使用OFFSET和LIMIT关键词）。

如果由于处理数据而导致延迟更多（或者也是），那么您可以一次只显示一个元素并使用setTimeout来更新显示，然后再继续下一个项目：

(function($){
    $('[data-search-criteria]').on('change', function(){
        var timer;
        clearTimeout(timer); // Interrupt any ongoing processing of a previous response
        $container = $('[data-search-results]').first();
        $.getJSON( "<?php echo JZ_PLUGIN_URL.'/includes/service_ajax.php';?>?search="+encodeURIComponent($(this).val())+"&include-partners=false", function(data){
            $container.text('');
            (function loop(i) {
                if (i >= data.length) return; // all done;
                var post = data[i];
                $container.append(
                    $('<div></div>').addClass('media').append(
                        $('<h3></h3>').text(post.post_title)
                    )
                );
                timer = setTimeout(loop.bind(null, i+1));
            })(0); // Immediately invoked function expression
        });
    });
})(jQuery);