admin管理员组文章数量:1427823
In my small Vue application, I'm trying to call the same method (emptyDivision) with different parameters from within another method (buttonClick). I set a 5-second timeout for the first invocation of that method, but this delay is not being recognized when I trigger these two functions by executing buttonClick.
<html>
<head>
<script src=".1.10/vue.min.js"></script>
<script src=".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>
After inspecting the console, the three-second timeout log statement is evaluated and produces the expected behavior, but the five-second timeout to emptyDivision("one") does not appear to be working, as detailed by the ments I left in the above code.
In my small Vue application, I'm trying to call the same method (emptyDivision) with different parameters from within another method (buttonClick). I set a 5-second timeout for the first invocation of that method, but this delay is not being recognized when I trigger these two functions by executing buttonClick.
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare./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>
After inspecting the console, the three-second timeout log statement is evaluated and produces the expected behavior, but the five-second timeout to emptyDivision("one") does not appear to be working, as detailed by the ments I left in the above code.
Share Improve this question asked Sep 10, 2017 at 19:38 Adam FreymillerAdam Freymiller 1,9398 gold badges28 silver badges53 bronze badges1 Answer
Reset to default 6In the first case you are passing a function definition to setTimeout which will be executed once it is resolved.
In the second case you are directly executing the function, so you need to wrap the statement into a function:
setTimeout( () => this.emptyDivision('one'), 5000)
If emptyDivision returned a function then that function would be executed after the timeout and you wouldn't need to wrap it.
本文标签： javascriptsetTimeout in Vue method not workingStack Overflow
版权声明：本文标题：javascript - setTimeout in Vue method not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745504020a2661162.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论