在vue中setTimeout 失效

Question

在实例中设置了方法，在方法中主要实现的效果是

在上面有三个路由，点击一个路由，先展示Loading...字样，三秒钟后会显示想用组件内容，但是在设置方法中设置了setTimeout方法，但是并没有起到作用，没有先展示loading字样，而是直接展示了子组件的内容，代码如下

<template>
<div>
<div>
<router-link to="/shuju/one">/shuju/one</router-link>
<router-link to="/shuju/two">/shuju/two</router-link>
<router-link to="/shuju/three">/shuju/three</router-link>
</div>
<div v-if="loading">Loading...</div>
<div v-if="post">
<router-view :page="post">
</router-view>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import After from './after.vue'
Vue.use(VueRouter)
const router=new VueRouter({
    routes:[
       {
       path:'/shuju/:id',
        name:'shuju',
        component:After,
        props:true
   }
    ]
})

export default{
    name:'daohangafter',
    data(){
    return{
      loading:false,
      post:null
    }
    },
    router,
    watch:{
    '$route':'fetchData'
    },
    methods:{
      fetchData(){
         let vm=this;
         this.post=null;
         this.loading=true;
      setTimeout(getPost(vm.$route.params.id),3000)
      function getPost(id){
         console.log(id);
          vm.loading=false;
           if(id=='one'){
                vm.post={title:'one',body:'这是one'}
           }else if(id=='two'){
                 vm.post={title:'two',body:'这是two'}
           }else{
               vm.post={title:'three',body:'这是three'}
           }
         }
      }

    }
}
</script>

子组件代码为

<template>
<div>
<h3>{{page.title}}</h3><p>{{page.body}}</p>
</div>
</template>
<script>
export default{
    name:"after",
    props:{page:Object}
}
</script>

请问如何才能实现三秒后再显示呢？setTimeout如何实现？

Answer 1

因为你直接运行了 那个方法
setTimeout(方法,延时)
应该这样
setTimeout(getPost,3000)

帮你改了一下

fetchData(){
    let vm=this;
    this.post=null;
    this.loading=true;
    setTimeout(()=>{
        let id = vm.$route.params.id
        console.log(id);
        vm.loading=false;
        if(id=='one'){
            vm.post={title:'one',body:'这是one'}
        }else if(id=='two'){
            vm.post={title:'two',body:'这是two'}
        }else{
            vm.post={title:'three',body:'这是three'}
        }
    },3000)
}

Answer 2

setTimeout(getPost(vm.$route.params.id),3000)

的意思是

getPost(vm.$route.params.id)
setTimeout(undefined,3000)

改成

setTimeout(getPost,3000,vm.$route.params.id)
//或者
setTimeout(()=>{
    getPost(vm.$route.params.id)
},vm.$route.params.id)

Answer 3

setTimeout(function () {

getPost(vm.$route.params.id)

},3000)

Answer 4

setTimeout(()=>getPost(vm.$route.params.id),3000)

Answer 5

vue中的setTimeout不能在内部function中直接获得vue的上下文，正确写法应该是

setTimeout(()=>{
this.user.nickname='lingk'
},1000)

这样才能在上下文中执行，下面这样写是错误的：

setTimeout(function(){
this.user.nickname='lingk'// 错误，无法修改user变量
},1000)