倒计时在某些情况下不起作用

Countdown not working in some cases

本文关键字：情况下 不起作用 倒计时      更新时间：2023-09-26

我正在为主页使用倒计时脚本。它只在第一次访问时加载。然后浏览其他网页并返回主页，它没有加载。

我正在使用流星和反应。

componentDidMount () {
$(window).load(() => {
 $('#clock').countdown('2016/9/9', function (event) {
     var $this = $(this).html(event.strftime(''
       + '<span>%m</span> months '
       + '<span>%w</span> weeks '
       + '<span>%d</span> days '
       + '<span>%H</span> hr '
       + '<span>%M</span> min '
       + '<span>%S</span> sec'));
  });
}); }

我的代码出了什么问题？

混合React和jQuery DOM操作绝对不是一个好主意。事实上，在componentDidMount内部调用$(window).load没有任何意义，因为componentDidMount已经确保React组件加载到DOM中。

下面是一个简单的倒计时计时器的例子，它使用了一种纯粹的"反应式"方法。我还复制了源代码，以防链接无效：

var CountdownTimer = React.createClass({
  getInitialState: function() {
    return {
      secondsRemaining: 0
    };
  },
  tick: function() {
    this.setState({secondsRemaining: this.state.secondsRemaining - 1});
    if (this.state.secondsRemaining <= 0) {
      clearInterval(this.interval);
    }
  },
  componentDidMount: function() {
    this.setState({ secondsRemaining: this.props.secondsRemaining });
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Remaining: {this.state.secondsRemaining}</div>
    );
  }
});
React.renderComponent(<CountdownTimer secondsRemaining="10" />, document.querySelector('#output'));

计时器由组件的状态决定，该状态通过tick函数递减。tick函数本身使用setInterval每x秒轮询一次。

我知道你的用例更复杂，因为它需要从特定的日历日期开始倒计时月、周、天等。你可以自己编写代码（不会太难），也可以找到一个合适的npm库来为你做这件事。

相关文章：