Question

这是一个简单的滑块代码，我想了解变量函数闭包是如何工作的......

(function($) {
var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width, // 600
    imgsLen = imgs.length, // 4
    current = 1,
    totalImgsWidth = imgsLen * imgWidth; // 2400

$('#slider-nav').show().find('button').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth; // 600

    // update current value
    **( direction === 'next' ) ? ++current : --current;
    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth; // 2400 - 600 = 1800
        direction = 'next';
    } else if ( current - 1 === imgsLen ) { // Are we at end? Should we reset?
        current = 1;
        loc = 0;
    }
    transition(sliderUL, loc, direction);**
});

function transition( container, loc, direction ) {
    var unit; // -= +=

    if ( direction && loc !== 0 ) {
        unit = ( direction === 'next' ) ? '-=' : '+=';
    }

    container.animate({
        'margin-left': unit ? (unit + loc) : loc
    });
}

})(jQuery);

在这部分：

    $('#slider-nav').show().find('button').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth; // 600

    // update current value
    ( direction === 'next' ) ? ++current : --current;

    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth; // 2400 - 600 = 1800
        direction = 'next';
    } else if ( current - 1 === imgsLen ) { // Are we at end? Should we reset?
        current = 1;
        loc = 0;
    }

    transition(sliderUL, loc, direction);
});

在if（当前=== 0）块中，在第一个块中更改后，变量current，loc和direction是否更新，然后将它们传递给下面的转换函数？

我认为如果else if（current - 1 === imgsLen）为真，那么current和loc是否会分配给分配给它们的先前值，然后传递给transition函数？

Answer 1

您突出显示的代码步骤如下： - 从单击的按钮获取'dir'的值 - 将loc的默认值设置为图像的宽度（imgWidth） - 如果direction是'next'，则将1添加到当前else，从当前

中减去1

现在，在这一点上，我们可能会遇到电流可能为0或imgLen + 1的情况。这些都不是一个好的值。所以我们做了以下几点 - 如果电流为0 - 将当前设置为imgsLen（转到上一张图片） - 将loc设置为最大可能的有效值 - 设定方向='下一步' - 如果电流超出最后一张图像 - 设置当前= 0（转到第一张图片） - 将loc设置为0（最小可能的有效值） - 使用更新的参数值

调用转换函数

希望这能回答你的问题。

Answer 2

direction和loc在“click”的回调函数范围内定义。每次调用该回调函数时，它们都会被初始化 - 每次点击。 direction由与按钮关联的'data-dir'初始化，loc初始化为当前值imgWidth（这是在主函数范围内定义的变量）。

初始化后，您可以通过direction逻辑修改loc和if-else if，然后将它们传递给函数transition()。（请注意，sliderIU也会传递给transition()，但它没有必要，因为它具有main函数的作用域，可以直接在transition()中使用而不作为参数传递{ {1}}。然而，将它作为参数传递可能并不是一个坏主意，因为当你可以从函数的参数中看到它所代表的值时，它会使编程风格更加清晰。）

回调单击函数中使用的变量container未在该回调单击函数的范围内定义，但具有主函数作用域（在main函数的开头定义）。这是必要的，因为您希望每次单击按钮时更改其值 - 并记住更改。回调单击函数是闭包，因为它可以访问（读取+写入）外部变量current。变量current和direction与闭包无关;它们只是传递给函数的变量。

函数变量闭包

2 个答案: