Question

我是React JS的新手，在某些方面javascript是我试图解决的问题。我在一个看起来像下面的组件中有一个函数，它遍历一组数字：

 playerSequence: function() {
        var game = this;
        this.state.game.sequence.map(function(currNum){
            console.log(currNum);
              switch(currNum){
                  case 1:
                      game.handleBlue();
                      break;
                  case 2:
                      game.handleYellow();
                      break;
                  case 3:
                      game.handleGreen();
                      break;
                  case 4:
                      game.handleRed();
                      break;

              }
          })
    },

每个函数调用都有一个setTimeout，它等待一段时间并呈现一个灯，然后在this.props.wait ms之后关闭灯。以下是一个例子：

var RedOn = React.createClass({
    mixins: [TimerMixin],
    componentDidMount: function () {
        this.setTimeout(function(){this.props.handleRed()}, this.props.wait);
    },
    handleRed: function() {
        this.props.handleRed()
    },
renderstuff
});

我想要的是每次通过map数组都要等到函数调用完成然后继续。就像现在一样，他们都在同一时间出发。我确信我并不完全了解节点的性质，反应或两者的组合。任何帮助将不胜感激。

Answer 1

根据React文档，componentDidMount 一次调用 ，仅在客户端（不在服务器上），立即初始渲染发生后。

因此，他们会立刻全部开火是有意义的。另一个问题是setTimeout一被调用就被调用，这意味着如果你以毫秒为单位传递一些时间到每个函数，map将只是一次调用它们，而不是按顺序应用它们。如果你想继续使用map，你应该声明一个变量来存储之前应用的时间，并将其添加到每个超时中。

var previousTime = 0; 

["foo", "bar", "baz"].map( function(e) { 
    setTimeout( function() { console.log(e); }, 1000 + previousTime); 
previousTime += 1000; });

这是我所描述的一个微不足道的例子。尝试在控制台中运行它以查看结果。每当你打电话＆＃34; setTimeout＆＃34;您将时间添加到previousTime变量，以便每个元素在显示之前等待一秒钟。

在一天结束时，即使使用React提供的所有抽象，请记住它的JJJavaScript™

React JS同步处理array.map

1 个答案: