jQuery 函数回调在自定义类/对象中不起作用答案

【问题标题】：jQuery function callback does not work in custom class/objectjQuery 函数回调在自定义类/对象中不起作用
【发布时间】：2015-06-10 15:10:54
【问题描述】：

所以我是编程新手，如果这是一个新手问题，请原谅。我正在创建一个简单的波浪效果来创建移动水的错觉。我用jquery中的一个简单函数做到了这一点，它工作得很好。我正在学习 OOP，所以我的代码对于我正在从事的这个项目更有条理。我创建了一个类来处理这个动画。动画有效，但只触发一次。我需要它不断开火来制造幻觉。函数回调以正常的程序方式工作，但它似乎不适用于对象类。我对此进行了研究并对此进行了研究，但找不到针对此特定问题的答案。任何帮助将非常感激。我的代码如下。

    function Waves(selector){
      this.selector = selector;
      this.animateWaves = function(forward,backward,speed){
        $(selector).velocity({translateX: forward},speed); 
        $(selector).velocity({translateX: backward},speed,animateWaves);
      };
    };
   var surfaceWaves = new Waves('#topWaves');
   surfaceWaves.animateWaves('+=40','-=40','1000');

【问题讨论】：

标签： javascript jquery class object callback

【解决方案1】：

编辑实际上，我的第一个解决方案不起作用，因为回调的上下文是元素，而不是对象。这是工作代码和jsfiddle：

function Waves(selector){
  this.selector = selector;
  this.animateWaves = function(forward,backward,speed){
    var self = this; 
    $(selector).velocity({translateX: forward},speed); 
      $(selector).velocity({translateX: backward}, speed, function () {
          self.animateWaves(forward,backward,speed);
      });
  };
};
var surfaceWaves = new Waves('#topWaves');
surfaceWaves.animateWaves('+=40','-=40','1000');

删除旧代码错误代码

【讨论】：

当您使用this.animateWaves 时，jQuery 将该回调的上下文设置为 HTML 元素 - 所以 this 不会引用您的 JS 对象。第二个版本有效，因为您使用的是 self 变量，它是指向 JS 对象的指针。因此，您可以访问animateWaves 方法。
完美！！！非常感谢。在您发布原始小提琴后，我立即发布了该小提琴。我将它包含在我的项目中，现在它工作正常。
好吧，你需要了解 JavaScript 中的作用域。可以显式设置函数的上下文（该函数内this 的值）。在 jQuery 回调的情况下，它通常是被操作的 DOM 元素。 animateWaves 方法不绑定到 DOM 元素，它绑定到 Waves JS 对象 - 所以你需要在回调中引用该对象。它第一次工作的原因是因为该方法不是从 jQuery 回调调用的，所以上下文是正确的 - 但在第一次之后，上下文不正确，因为它是从 jQuery 调用的。