jquery - 存储 jQuery 代码以供稍后使用 $(window).resize()

Question

我有一个 jQuery 内容 slider ，其中每张幻灯片都是屏幕的整个宽度。我正在计算每张幻灯片应该在 jQuery 中的宽度 - 而不是 CSS (我这样做有我的理由 - 我不会用它们让你感到无聊)。正如您从下面的代码中看到的，我将所有尺寸计算两次 - 第二次是在用户调整窗口大小时。我只是想知道我是否可以存储代码，然后在 $(window).resize(); 内调用该代码？这应该有一个简单的答案，但目前我无法理解!

var windowHeight = $(window).height(); //Get the height of the window
var windowWidth = $(window).width(); //Get the width of the window
$(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px"); //Make each slide’s dimensions equal to that of the window

$(".slide").each(function(i, e) {
    //Execute animation
    $("#trigger" + i).click(function(e) {
        $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); //The variables here that I use to animate the slide are unimportant to my question. I’ve removed the vars so this code is easier to read.
    });
});

//Resize
$(window).resize(function() {
    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width();
    $(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px");

    $(".slide").each(function(i, e) {
        $("#trigger" + i).click(function(e) {
            $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo');
        });
    });

});

Answer 1

function adjustSize(){
    var windowHeight = $(window).height(); //Get the height of the window
    var windowWidth = $(window).width(); //Get the width of the window
    $(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px"); //Make each slide’s dimensions equal to that of the window

    $(".slide").each(function(i, e) {
        //Execute animation
        $("#trigger" + i).click(function(e) {
            $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); //The variables here that I use to animate the slide are unimportant to my question. I’ve removed the vars so this code is easier to read.
        });
    });
}
$(window).resize(adjustSize);
adjustSize();  //or $(window).resize(adjustSize).resize(), it works too