jquery - 每次窗口调整大小时，jquery都会重复触发函数 - 但应该只执行一次

Question

我想用一些占位符 PNG 填充文章列表中的空白。如果窗口大小为 320，则需要填充奇数个项目 -> 1 个占位符。

如果窗口大小大于 320 并且只列出一篇文章或列出偶数篇文章，则应添加一或两个占位符。

工作正常，但脚本总是触发占位符，每次窗口大小发生变化。

这里是：

$(document).ready(function() {

//the first loaded articlelist
var str = $('.item').length;
var width = $(window).width();

if ((str % 2) != 0 && width == 320) {
$('div.item').last().after('<div class="filler"></div>');
}
if ((str % 3) === 1 && width > 320) {
$('div.item').last().after('<div class="filler"></div><div class="filler"></div>');
}
if ((str  % 3) === 2 && width > 320) {
$('div.item').last().after('<div class="filler"></div>');
}

$(window).resize(function(){
    if($(this).width() != width){
        width = $(this).width()
        if ((str % 2) != 0 && $(window).width() == 320) {
        $('div.item').last().after('<div class="filler"></div>');
    }
    if ((str % 3) === 1 && $(window).width() > 320) {
        $('div.item').last().after('<div class="filler"></div><div class="filler"></div>');
    }
    if ((str  % 3) === 2 && $(window).width() > 320) {
        $('div.item').last().after('<div class="filler"></div>');
    }
    }
});
...

Answer 1

Jquery .one()应该可以解决您的问题，它只允许执行一次绑定函数

$(window).one("resize", function(){...}