功能的可调关闭

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和方向在第一个块中被更改后更新，然后它们被传递到下面的转换函数？

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

Answer 1

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

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

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

Answer 2

为您所标明的代码的步骤如下： - 获取从按钮被点击 “目录”的价值 - LOC的设置默认值图像的宽度（imgWidth） - 如果方向是'下一个'，则将1加1到当前else从当前减去1

现在，在这一点上，我们可能会遇到电流可能为0或imgLen + 1的情况。其中之一不是物有所值。所以，我们做了以下 - 如果电流为0 - 设定电流imgsLen（去最后一个图像） - 设置禄来最大可能的有效值 - 设定方向=“下一个” - 如果电流超过最后一个图像 - 设定电流= 0（转到第一个图像） - 设置LOC 0（最小的可能有效值） - 呼叫转移功能与参数的更新值

希望这回答了你的问题。