Javascript 窗口。将停止传播调整到更高的断点

我动态地创建了元素，这些元素在不同的窗口大小下会有不同的反应。这些大小是动态的，可以由用户的数组传入。例如，像

{500:3300:1}

这样的对象数组将以500px显示3个项目，以300px显示1个项目。我在init上创建以下侦听器：

    var sizesArray = {500 : 3, 300: 1};
    var numItems = shownItems;
    $.each(sizesArray, function(key, value) {
            $(window).on("resize", elem, function () {
                 if ($(window).width() <= key) {                         
                       shownItems = value;          
                 } else {
                       shownItems = numItems;           
                 }
            });
     })

var-sizesArray={500:3300:1}；
var numItems=shownItems；
$.each（大小数组、函数（键、值）{
$（窗口）。打开（“调整大小”，元素，函数（）{
if（$（window）.width（）您只能使用一个
resize
事件，然后迭代对象。当您迭代对象时，只要在获得
true
值时中断循环即可，这将阻止其他检查：

var sizesArray = [{ size: 300, value: 1 }, { size: 500, value: 3}]; // use an array that contains size objects listed from the smallest size to the largest to avoid browsers differences when iterating objects
var numItems = shownItems;

$(window).on("resize", function () {
    var width = $(window).width();
    shownItems = numItems; // reset the number of shown items

    $.each(sizesArray, function (index, sizeObj) { // iterate sizes array
        if (width <= sizeObj.size) { // if width <= key return false - break the loop, so the other checks won't occur
            shownItems = sizeObj.value;
            return false;
        }
    });
});

使用window.matchMedia而不是resize event handler-@OriDrori这很有帮助，我可能会使用它来代替我的条件，但它似乎仍然存在传播到两个大小的相同问题，只是每次都会触发与更改匹配的特定侦听器，因此如果您有300、500、700个宽度，当您放大屏幕时，每个侦听器都会我将触发一次。这似乎是一个非常昂贵的函数，不会在每次调整数组大小（触发每个像素）时迭代数组，因为可能有多个对象，所以效率很低？另外，我不认为我可以使用matchMedia，因为当屏幕变大时，它无法将大小设置回默认值。我不确定谴责和限制是什么，但我认为这是某种插件？我实际上在我自己的插件中使用了这段代码，所以我不尝试包含其他插件。对于match media用户可以设置阵列中的任何数字，因此无需运行更多的检查来查看最大的数字是什么（尽管这可能是解决方案）。不管怎样，你都是对的。这些数组不会很大，所以我会试试这个想法，看看它是如何工作的。删除和恢复是因为拼写检查器将debounce更改为Debunce：通常的补救方法是使用debounce或throttle来最小化处理程序的执行量。无论如何，它是一个小数组，我不确定是否设置了大量的大小调整处理程序的性能更高。在matchMedia中使用“大于数组中最后一个大小”默认情况下。是简单函数：Debounce将执行推迟到自上次调用该函数以来的x时间。Throttle只允许每x时间执行一次。您可以在循环中创建matchMedia查询，然后识别最后一次。我将添加一个示例。
var sizesArray = [{ // should be sorted from smallest to largest
    size: 300,
    value: 1
}, {
    size: 500,
    value: 3
}];

var lastQueryIndex = sizesArray.length - 1; // cache the index of the last query

var numItems = shownItems;

sizesArray.forEach(function (query, index) {
    var match = window.matchMedia("(max-width: " + query.size + "px)"); // create the queries

    match.addListener(function (mediaQueryListEvent) { // check match on resize
        console.log(query.size, match.matches);
        mediaQueryListEvent.matches && updateState(query.value);
        index === lastQueryIndex && !mediaQueryListEvent.matches && updateState(numItems); // for the last query, check if bigger to restore default
    });

    console.log(query.size, match.matches);
    match.matches && updateState(query.value); // update onload
});

function updateState(value) {
    shownItems = value;
    console.log(shownItems);
}