jquery - jQuery: ローカル関数の再帰呼び出しが機能しない

Question

Google を使用して問題を解決しようとしましたが、解決策が見つかりませんでした。2 つの div コンテナーを個別に上下にスライドさせる小さな jQuery スクリプトを作成しました。このスライディングエンドレスを繰り返すために、再帰呼び出しを使用しました。これは私のコードです:

jQuery.fn.scroller = function() {
      var scrollamount = $(this).height() - $(window).height();
      var scrollduration = scrollamount * 10;
      var pauseduration = 3000;
      var docheight = $(this).height();
      var doScroll = function () {
          $(this).delay(pauseduration)
              .animate({top: -scrollamount, height: docheight}, scrollduration, 'linear')
              .delay(pauseduration)
              .animate({top: 0, height: $(window).height()}, scrollduration, 'linear', $(this).doScroll);

          };
      $(this).height($(window).height()).doScroll();
      };
$(document).ready(function(){
    $('#globdiv').scroller();
    $('#globdiv2').scroller();
    });

エラーコンソールは、この行の doScroll を示しています

$(this).height($(window).height()).doScroll();

関数ではありません。別の解決策を見つけました：

$.fn.doScroll = function(pauseduration, scrollamount, scrollduration, docheight) {
          $(this).delay(pauseduration)
              .animate({top: -scrollamount, height: docheight}, scrollduration, 'linear')
              .delay(pauseduration)
              .animate({top: 0, height: $(window).height()}, scrollduration, 'linear', function(){
                  $(this).doScroll(pauseduration, scrollamount, scrollduration, docheight);
              });
     };
$.fn.scroller = function(){
      var scrollamount = $(this).height() - $(window).height();
      var scrollduration = scrollamount * 10;
      var pauseduration = 3000;
      var docheight = $(this).height();
      $(this).height($(window).height()).doScroll(pauseduration, scrollamount, scrollduration, docheight);
      };
$(document).ready(function(){
    $('#globdiv').scroller();
    $('#globdiv2').scroller();
    });

これは正常に機能しますが、最初のアプローチが機能しない理由と、それを実行するために何ができるかを知りたいです。宜しくお願いします - ウルリッヒ