パラメータ付きのオプションのコールバック関数の受け渡し

Question

私は、オプションのエフェクトコールバック関数をとることができる小さなスクロールメソッドを作成するさまざまな方法を試みています。私がscrollToEl（el、flash）を実行すると、最初に要素までスクロールしてフラッシュするとします。どのように私は通常これについて行くだろうか？

これは私がやったことですが、実際には機能しません。

私はこのようにそれを使用したい

scrollToEl : function(el, callback) { 
    // flash the selected product 
    var self = this; 
    $('html, body').animate({ 
     scrollTop: el.offset().top - 50 
    }, 1000, 'swing', callback); // how to pass el here as well paired with callback? 
} 

flash : function(el) { 
    // flash the selected product 
    el.animate({ 
     opacity : 0.4 
    }, 100, 'swing', function() { 
     el.animate({ 
      opacity : 1 
     }, 1000, 'swing'); 
    }); 
}, 

：

var el = $('#element'); 
scrollToEl(el, flash); // how to pass in to the callback function flash? 

Answer 1

あなたが閉鎖使用することができます：あなたは、コールバックがしたい場合はClosures are not complicated

：閉鎖について

scrollToEl : function(el, callback) { 
    // flash the selected product 
    var self = this; 

    // Get completion callback if any 
    var completion; 
    if (callback) { 
     completion = function() { 
      callback(el); // See below if you prefer `el` to be `this` in the callback 
     }; 
    } 
    else { 
     completion = $.noop; 
    } 
    $('html, body').animate({ 
     scrollTop: el.offset().top - 50 
    }, 1000, 'swing', completion); 
} 

もっと要素をthisとして受け取った場合は、jQuery.proxyの代わりにjQuery.proxyを使用できます

scrollToEl : function(el, callback) { 
    // flash the selected product 
    var self = this; 

    $('html, body').animate({ 
     scrollTop: el.offset().top - 50 
    }, 1000, 'swing', callback ? $.proxy(callback, el) : $.noop); 
} 

proxyは関数を作成するため、同じことが起こります。しかし、それはscrollToElへの呼び出しのコンテキスト上でクロージャを導入しません。

Answer 2

それはthisとしてではなく、パラメータとして、影響を受けた要素を持っているために、コールバックのためのより正常のようになります。

flash : function() { 
    // flash the selected product 
    $(this).animate({ 
     opacity : 0.4 
    }, 100, 'swing', function() { 
     $(this).animate({ 
      opacity : 1 
     }, 1000, 'swing'); 
    }); 
} 

し、それが呼び出さだときthisにelをバインドする.callまたは.applyを使用していますクロージャを使います：

$('html, body').animate({ 
    scrollTop: el.offset().top - 50 
}, 1000, 'swing', callback ? function() { 
    callback.call(el); 
} : undefined);