Question

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

<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（＆＃34;一个＆＃34;）的五秒超时似乎不起作用，详细我在上面的代码中留下的评论。

Answer 1

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

在第二种情况下，您直接执行该函数，因此需要将语句包装到函数中：

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

如果emptyDivision返回一个函数，则该函数将在超时后执行，您不需要将其包装。

Vue方法中的setTimeout不起作用

1 个答案: