機能変数閉鎖

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); 
}); 

=== 0）block、最初のブロックで変更された後の変数current、loc、directionは更新されていますか？それから、それらは以下の遷移関数に渡されますか？

else（current-1 === imgsLen）がtrueの場合、currentとlocはそれらに割り当てられた前の値を上書きしてから、transition関数に渡されますか？

Answer 1

directionおよびlocは、「クリック」のコールバック関数の範囲で定義されています。コールバック関数を呼び出すたびに - クリックごとに初期化されます。 directionはボタンに関連付けられた 'data-dir'で初期化され、locは現在の値imgWidth（メイン関数のスコープで定義された変数）に初期化されます。

directionとlocは、if-else ifロジックで変更することができ、その後、transition()に渡されます。 （sliderIUもtransition()に渡されますが、主な機能のスコープがあり、containerとして渡されずにtransition()内で直接使用できるため、不要ではありますが、それを渡すのは悪い考えではないかもしれません

コールバッククリック機能で使用される変数currentはスコープ内で定義されていませんそのcallback-click関数のメイン関数スコープ（main関数の先頭に定義されています）があります。これは、ボタンをクリックするたびにその値を変更し、変更を覚えておく必要があるために必要です。 callback-click関数は、外部変数currentにアクセス（読み取り+書き込み）できるため、クロージャです。変数directionとlocはクロージャとは関係ありません。それらは単に関数に渡す変数です。

Answer 2

次のように強調したコードのための手順は以下のとおりです。 - をクリックされたボタンから「DIR」の値を取得します - 画像（imgWidth）の幅にLOCの設定されたデフォルト値 - directionが 'next'の場合、現在のelseに1を加えて、現在の値から1を減算します。

現在、現在の値は0またはimgLen + 1の場合があります。価値がある。- 現在の値が0の場合 - 現在の値をimgsLenに設定します（最後の画像に移動） - 有効な最大値にlocを設定します - 方向を設定する 'next' - 現在の値が最後の画像を超えている場合 - 0 =現在の設定（最初の画像に移動） - 0（最小の可能な有効な値）に設定されLOC - 引数の更新値これは、あなたの質問に答える

希望と遷移関数を呼び出します。