javascript - setTimeout in Vue method not working -
in small vue application, i'm trying call same method (emptydivision) different parameters within method (buttonclick). set 5-second timeout first invocation of method, delay not being recognized when trigger these 2 functions executing 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 1 ("steelers" , "ravens") should propagated dom after 5 seconds, it's being evaluated @ same time invocation this.emptydivision("two") */ this.emptydivision("two"); /* expect ("broncos" , "raiders" rendered dom first due timeout, not happening*/ } } }) </script> </body> </html> after inspecting console, three-second timeout log statement evaluated , produces expected behavior, five-second timeout emptydivision("one") not appear working, detailed comments left in above code.
in first case passing function definition settimeout executed once resolved.
in second case directly executing function, need wrap statement function:
settimeout( () => this.emptydivision('one'), 5000) if emptydivision returned function function executed after timeout , wouldn't need wrap it.
Comments
Post a Comment