Javascript Jquery-在类中循环

为了最佳实践，JS的相对新手试图保持代码类的方向性。我找到了一段我想在项目中使用的文本循环效果代码。在我的主App.js中使用代码效果很好。然后，我试图使它面向类/模块，以便以后可能的回收，但到目前为止，我遇到了困难。相反，通过传递控制台日志，我注意到我尝试在类内和App.js文件中将类调用到HTML中时使用SetInterval，但似乎不起作用，在隔离类之外从未正确循环多次

这是我代码的当前状态，可能与我之前所做的相去甚远，但它应该让我知道我的想法在哪里

TextCycle.js：

import $ from 'jquery';

class TextCycle{
constructor(){
    this.cycledText = $('.cycled-text');
    this.i = 0;
}

cycle(){
    //this.cycledText.removeClass('cycled-text--active');
    //this.cycledText.eq(this.i).addClass('cycled-text--active');
    this.i++;
    console.log(this.i);
}
}
export default TextCycle;

App.js：

import TextCycle from './components/TextCycle';

var textCycle = new TextCycle();

setInterval(textCycle.cycle(), 3000);

---

考虑到我有一个工作版本，这不是一个关键问题，但考虑到我是如何学习的，我在实践这种JS组织和模块化，任何关于这项工作的见解都是非常有帮助的

在调用

.cycle（）

的同时，您使用

setInterval（）

的方式出现问题

简而言之，您需要更新调用

setInterval

的代码，以便只在回调期间调用

cycle（）

。这样做可以：

setInterval(function() { textCycle.cycle() }, 3000);

当前代码失败的原因之一是，在此行中会立即调用

textCycle.cycle（）

：

setInterval(textCycle.cycle(), 3000); // Notice the () after cycle? 
                                      // That's causing the cycle 
                                      // method to be called immediately

通过将其放置在回调函数中（如上所示），可以完成以下几件事：

• 它确保从正确的上下文（即

  textCycle

  对象的上下文）调用

  cycle（）

  。这基本上意味着当您在

  cycle（）

  中使用

  此
  时，此
  将是
  textCycle
  对象，而不是全局对象
  

• 它确保

  cycle（）

  方法仅在

  setInterval

  的“回调”期间调用，该回调在集合内部调用，而不是立即调用

---

希望这能有所帮助！

我的一个评论是，如果你想创建一个类，为什么要静态地分配

this.cycledText

？至少要将该类传递给构造函数。这解决了部分问题，即循环无法通过，我可以用原始代码中的表达式修改它，以增加up到，只要this.cycledText是。剩下的就是利用它来应用类，这似乎不适用于我现有的代码。感谢您迄今为止的帮助！