如何将窗口resize函数的visibleSlides值传递至Next按钮点击函数？

你的问题核心在于没有把resize时获取到的可见幻灯片数量持久化存储，导致点击Next按钮时调用getSlideCount()没有传入有效参数，自然返回undefined。

可以通过一个变量来保存当前可见幻灯片的数量，修改后的代码如下：

// 定义变量存储当前可见幻灯片数，初始值先获取一次（避免页面加载后未resize就点击Next的情况）
let currentVisibleSlides = $(".carousel-item.slick-active").length;

$(window).resize(function () {
   // resize时更新变量值
   currentVisibleSlides = $(".carousel-item.slick-active").length;
});
            
// 直接返回存储的变量值
function getSlideCount(){
   return currentVisibleSlides;
}

$(".slick-next").click(function(){
    $("#counter").append(`Next ${getSlideCount()} items`);
});

改动说明： #

• 新增currentVisibleSlides变量，用来持久化存储当前可见幻灯片的数量，页面加载时就初始化一次值。
• resize事件中不再调用getSlideCount，而是直接更新currentVisibleSlides的最新值。
• 修改getSlideCount函数，不需要接收参数，直接返回存储的变量值。
• 点击Next按钮时，调用getSlideCount()就能拿到最新的可见幻灯片数量。

如果不想让变量污染全局作用域，也可以用闭包封装：

const slideCounter = (function() {
    let currentVisibleSlides = $(".carousel-item.slick-active").length;

    $(window).resize(function () {
        currentVisibleSlides = $(".carousel-item.slick-active").length;
    });

    return {
        getCount: function() {
            return currentVisibleSlides;
        }
    };
})();

$(".slick-next").click(function(){
    $("#counter").append(`Next ${slideCounter.getCount()} items`);
});

这种方式把变量封装在闭包内部，更符合模块化写法，不会影响全局作用域的其他变量。

内容的提问来源于stack exchange，提问作者Matt