Question

JS的一个相对较新的成员，为了保持最佳实践，试图使我的代码保持面向类。我找到了一段代码here，该代码用于我想在项目中使用的文本循环效果。在我的主要App.js中按原样使用代码可以正常工作。然后，我尝试使其面向类/模块，以便以后进行可能的回收，但是到目前为止，我遇到了麻烦。相反，通过控制台日志时，我注意到我尝试在类中以及在将类调用到HTML的App.js文件中使用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组织和模块化，因此任何有关开展这项工作的见解都将大有帮助！

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

通过将其放置在回调函数中（如上所示），这可以做一些事情：

它确保从正确的上下文（即cycle()对象的上下文）中调用textCycle。这基本上意味着，当您在{{1 }}，那么this将是cycle()对象，而不是全局对象
它确保仅在this“回调”期间调用textCycle方法，该方法是在您设置的内部调用的，而不是立即被调用的

希望这会有所帮助！

jQuery-在课程中循环

1 个答案: