Vue 方法中的 setTimeout 不起作用

Question

Vue 方法中的 setTimeout 不起作用

Ada*_*ler 0 javascript settimeout vue.js vuejs2

在我的小型 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>

Run Code Online (Sandbox Code Playgroud)

检查控制台后，三秒超时日志语句被评估并产生预期的行为，但 emptyDivision("one") 的五秒超时似乎不起作用，如我在上面留下的评论所详述代码。

Answer 1

Isi*_*osa 6

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

第二种情况是直接执行函数，所以需要将语句包装成函数：

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	8 年，3 月前
查看次数：	3016 次
最近记录：	8 年，3 月前