ajax速度-简化多个ajax调用

ajax speed - boiling down multiple ajax calls

本文关键字：ajax 调用 速度      更新时间：2023-09-26

我的网站上有一个搜索过滤器，当用户取消选中一个框时，会向服务器发送一个ajax调用，返回新的、缩小范围的搜索结果。

然而，现在，用户可以同时取消选中大约20个框，这迫使我进行20个不同的ajax调用——这是非常慢的

关于如何将20个不同的ajax调用传递到一个调用中以加快速度，有什么想法吗？

这是我的js:

// to allow us to process the "only" buttons, which don't register the click event we're looking for
        $("input[type=checkbox]").change(function() {
            // remove the original, unfiltered results
            $('#original_results').css("display", "none");
            // which filter section does the filter belong to
            var filter_section = $(this).attr('name');
            // should it be filtered out or left in
            var remove = $(this).prop('checked');
            // if needs to be filtered
            if (!remove)
            {
                // add it to our filter list for the specified section
                filters[filter_section].push(this.value);
            }
            else
            {
                // take it off the list for the specified section
                var index = filters[filter_section].indexOf(this.value);
                if (index > -1)
                {
                    filters[filter_section].splice(index, 1);
                }
            }
            doAjax();
        });
    // ajax function
        function doAjax() {
            // get slider values
            var ranges = $('#pay_range').slider('values');
            // define data to post
            var data = {
                min: ranges[0],
                max: ranges[1],
                filters: filters,
                criteria: criteria
            };
            // post data

            $.ajax({
                type: 'POST',
                url: '/results/search_filter',
                data: data,
                beforeSend: function() {
                    $('#search_results').html('Updating your query');
                },
                success: function(response) {
                    $('#search_results').html(response);
                },
                dataType: "html"
            });

        }

据我所知，您希望AJAX调用在每个操作中只发生一次，即使该操作包括更改多个复选框。

我已经使用javascript的setTimeout()来"缓冲"事件。当复选框被更改时，会设置一个短暂的超时，从而触发AJAX。如果在该时间段内更改了另一个复选框，则会重新设置超时（而不是触发AJAX两次）。AJAX只在超时结束时触发一次。

// initialize timer variable
var ajaxtimer;    
// function to run AJAX
function runajax() {
    alert('ajax');
}
// clicking a checkbox sets all checkboxes to the same state
$("input[type=checkbox]").on('click', function () {
    $('input[type=checkbox]').prop('checked', this.checked).change();
});
// fires on checkbox change, sets short timeout
$("input[type=checkbox]").on('change', function () {
    clearTimeout(ajaxtimer);
    ajaxtimer = setTimeout(runajax, 50);
});

工作示例（jsfiddle）

编辑：

我看到了你发布的链接，并进行了以下调整：

我在文件顶部定义了这个变量：

var ajaxtimer;

在results.js的第156行，我更改了：

doAjax();

至

clearTimeout(ajaxtimer);
ajaxtimer=setTimeout(doAjax,50);

这是一把小提琴。布局被破坏了，但您可以看到，单击"only"链接只会导致一个ajax调用，而不是对每个更改的复选框都进行一次调用。

相关文章：