Vue方法不起作用的setTimeout

在我的小Vue应用程序中，我试图用另一个方法（buttonClick）中的不同参数调用同一个方法（emptyDivision）。我为该方法的第一次调用设置了5秒的超时时间，但是当我通过执行buttonClick触发这两个函数时，此延迟无法识别。Vue方法不起作用的setTimeout

<html> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script> 
    </head> 
    <body> 
     <div id="app"> 
      <button v-on:click="buttonClick">Simulate Placement</button> 
      <h1>Random Division 1</h1> 
      <p>{{A.One}}</p> 
      <p>{{A.Two}}</p> 
      <h1>Random Division 2</h1> 
      <p>{{B.One}}</P> 
      <p>{{B.Two}}</p> 
     </div> 
     <script type="text/javascript"> 
      new Vue({ 
       'el': '#app', 
       'data': { 
        'A': {'One': "", 'Two': "" }, 
        'B': {'One': "", 'Two': "" }, 
        'Division1': ["Steelers", "Ravens"], 
        'Division2': ["Broncos", "Raiders"], 
       }, 
       'methods': { 
       'emptyDivision': function(division){ 
        this.A[division] = this.popTeam(division)[0]; 
        this.B[division] = this.popTeam(division)[0]; 
       }, 
       'popTeam': function(division) { 
        if (division === "One"){ 
        return this.Division1.splice(Math.floor(Math.random()*this.Division1.length), 1); 
        } 
        return this.Division2.splice(Math.floor(Math.random()*this.Division2.length), 1); 
       }, 
       'buttonClick': function() { 
        setTimeout(function() {console.log("This appears after 3 seconds")}, 3000); 
        setTimeout(this.emptyDivision("One"), 5000); /*Teams in division one 
      ("Steelers" and "Ravens") should be propagated to the DOM after 5 seconds, but it's being 
      evaluated at the same time as the invocation to this.emptyDivision("Two") */ 

        this.emptyDivision("Two"); /* I expect ("Broncos" and "Raiders" to be rendered to the DOM 
      first due to the timeout, but this is not happening*/ 
     } 
     } 
    }) 
    </script> 
</body> 
</html>

检查控制台后，三秒钟超时日志语句进行评估，并产生预期的行为，但在五秒钟的超时emptyDivision（“1”）似乎没有奏效，通过详情见我留在上面的代码中的评论。

来源

2017-09-10 Adam Freymiller

在第一种情况下，您将函数定义传递给setTimeout，解析后它将被执行。

在第二种情况下，你是直接执行的功能，所以你需要用的语句转换成一个功能：

setTimeout(() => this.emptyDivision('one'), 5000)

如果emptyDivision返回的功能，那么该功能将在超时后执行，你止跌不需要包装它。

来源

2017-09-10 19:50:38

Vue方法不起作用的setTimeout

回答

相关问题