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

【问题标题】：Countdown not working in some cases倒计时在某些情况下不起作用
【发布时间】：2016-08-11 01:44:09
【问题描述】：

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

我正在使用流星并做出反应。

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'));
  });
}); }

我的代码有什么问题？

【问题讨论】：

浏览器缓存是问题
没有。用不同的浏览器检查过。
您如何检查并得出缓存不是问题的结论？
清除凉亭缓存、离线网站数据等

标签： javascript jquery reactjs ecmascript-6

【解决方案1】：

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

Here 是一个使用纯“反应式”方法的简单倒计时计时器示例。我还复制了源代码以防链接失效：

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 函数本身每 x 秒使用 setInterval 轮询一次。

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

【讨论】：