javascript - Jquery - 在类(class)内循环

Question

这个问题已经有答案了:

JavaScript setTimeOut doesn't seem to work like I expect (1 个回答)

已关闭 5 年前。

为了最佳实践，JS 的相对新手试图保持我的代码面向类。我找到了一段代码here对于我想在项目中使用的文本循环效果。在我的主 App.js 中按原样使用代码效果很好。然后，我尝试使其面向类/模块，以供以后可能的回收利用，但到目前为止，我已经碰壁了。相反，传递控制台日志我注意到我尝试使用 SetInterval，无论是在类内还是在将类调用到 HTML 中的 App.js 文件中，似乎都不起作用，除了隔离它之外，从未正确循环多次.

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

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;

应用程序.js:

import TextCycle from './components/TextCycle';

var textCycle = new TextCycle();

setInterval(textCycle.cycle(), 3000);

鉴于我有一个工作版本，这不是一个关键问题，但鉴于我的教学方式是练习这种 JS 组织和模块化，因此任何关于使这项工作有效的见解都非常有帮助!

Answer 1

您使用 setInterval() 以及调用 .cycle() 的方式存在问题。

简而言之，您需要更新调用 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()。这基本上意味着当您使用 this 在 cycle() 内部，那么 this 将是 textCycle 对象，而不是全局对象

• 它确保cycle()方法仅在setInterval“回调”期间被调用，该回调在您的集合内部调用，而不是被调用立即

希望这有帮助!