React中setInterval()未按预期执行，仅触发一次求修复方案

嘿，我一眼就看到你代码里的问题啦，这是个很常见的小失误，咱们一步步来修复：

核心问题：setInterval的参数传错了 #

你写的：

setInterval(timeline.launch(), 1000);

这里的timeline.launch()会立即执行这个函数，然后把它的返回值（这里是undefined）传给setInterval。但setInterval需要的是一个函数引用（也就是不带括号的函数名），这样它才能每隔指定时间主动去调用这个函数。

次要问题：多余的$(document).ready #

在React的componentDidMount生命周期钩子中，组件已经挂载到DOM上了，整个页面的DOM肯定已经就绪了，所以launch方法里的$(document).ready完全是多余的，甚至可能导致你的逻辑延迟执行，直接删掉就行。

修正后的完整代码 #

React组件部分 #

class Grid extends Component {
  componentDidMount() {
    // 传函数引用，不要加括号调用
    this.intervalId = setInterval(timeline.launch, 1000);
  }

  // 务必加上这一步：组件卸载时清除定时器，防止内存泄漏
  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return <GridView />;
  }
}

Timeline函数部分 #

const $ = window.$;
class lifeTimeline {
  launch() {
    // 直接写你的计时器渲染逻辑就行，不用套ready回调
    /* 在页面渲染计时器 */
  }
}
const instance = new lifeTimeline();
export default instance;

特殊情况：如果launch需要正确的this指向 #

如果你的launch方法里用到了this（指向lifeTimeline实例），那用箭头函数包裹更保险，确保上下文正确：

componentDidMount() {
  this.intervalId = setInterval(() => timeline.launch(), 1000);
}

这样修改后，setInterval就会每隔1秒执行一次launch方法啦～

内容的提问来源于stack exchange，提问作者Rami Chasygov