jQuery：本地函数的递归调用不起作用

Question

我尝试使用 Google 来解决我的问题，但没有找到解决方案。我编写了一个小的 jQuery 脚本，它可以独立地上下滑动两个 div 容器。为了重复这个无限滑动，我使用了递归调用。这是我的代码：

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

这很好，但我想了解为什么我的第一种方法不起作用以及我可以做些什么来让它运行。 最好的问候 - 乌尔里希

Answer 1

您的第一种方法不起作用，因为doScroll 不是jQuery 对象上的方法，它只是一个本地函数。你可以让它像这样工作：

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

或者您可以更改 doScroll 的签名以接受元素/jQuery 对象作为参数：

var doScroll = function (ele) {
          $(ele).delay(pauseduration)
              .animate({top: -scrollamount, height: docheight}, scrollduration, 'linear')
              .delay(pauseduration)
              .animate({top: 0, height: $(window).height()}, scrollduration, 'linear', function (){doScroll(ele);})};

          };
          doScroll($(ele).height($(window).height()));
      };

Answer 2

函数 .doScroll 不适用于 $(this) 但用于“this”，这就是链接不起作用的原因，试试这个：

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