功能的可調關閉

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（最小的可能有效值） - 呼叫轉移功能與參數的更新值

希望這回答了你的問題。