Question

我的网站上有一个搜索过滤器，当用户取消选中一个框时，会向服务器发布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"

            });


        }

Answer 1

据我了解，您希望您的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);
});

WORKING EXAMPLE (jsfiddle)

编辑：

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

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

var ajaxtimer;

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

doAjax();

到

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

Here's a jsfiddle。屠宰布局，但您可以看到单击“仅”链接只会导致一个ajax调用，而不是每个已更改的复选框都会调用一个。

ajax速度 - 煮沸多个ajax调用

1 个答案:

编辑：