theme: fancy

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

发生背景:

在项目中一个父组件同时引用了两个不同的子组件,其中一个子组件通过v-if判断flag控制渲染,而另外一个子组件能改变flag.当时的需求是当子组件改变flag将另一个子组件显露出来,同时将新渲染出来的子组件添加类名来改变样式.刚开始发现document.getElementById无法获取到标签,然后猜测应该是浏览器还未完成渲染,可能要执行完这个函数才完成渲染,于是将document.getElementById放到setTimeout()中尝试,发现settimeout()没生效.\ 父组件: <div class="DetailPage" id="DetailPage"> <DetailPageLeft id="DetailPageLeft" :suggest_num="suggest_num" :good_num="good_num" :good_num_flag="good_num_flag" @get_collect_open_flag="collect_open_flag"></DetailPageLeft> <CollectList id="CollectList" v-if="collect_open_flag_this" :collcectlist="collcectlist" @closecollect="close_collect" @commit_collect="getcommit_collect"> </CollectList> </div>

``` collectopenflag() { //当弹窗处于开启状态,就关闭弹窗 if (this.collectopenflagthis) { this.closecollect(); } else { document.getElementById('DetailPageLeft').classList.add('masking'); //控制弹窗开启. this.collectopenflagthis = !this.collectopenflagthis; }

// setTimeout(() => {
        //     console.log(document.getElementById('CollectList'));
        //     document.getElementById('CollectList').classList.add('remasking');
        // }, 500);
    },

```

解决方案:

失效原因:

原因是setTimeout的this指向的windows.

解决方案1:

箭头函数本身没有执行作用域，是继承其父的执行上下文，所以箭头函数的this指向绑定其父的作用域 所以使用箭头函数去构造函数可以避免这种情况.

setTimeout(() => { console.log(document.getElementById('CollectList')); document.getElementById('CollectList').classList.add('remasking'); }, 500);

解决方案2:

使用一个变量去代替this.\ 比如:

var that=this 这两种方法都可以解决Vue中setTimeout()不生效的问题.

总结:

这次让我想起来了以前写微信小程序时碰到的问题,也是异步加载的原因改变了this指向,当时刚开始学前端,用微信链接云数据库的接口时的success回调默认是异步的,当时不了解异步就代码执行顺序感觉莫名其妙.当时在success回调里调用this.data报错说未定义,感觉一脸懵,后来也是用第二种方法去定义了一个变量去代替this解决了这个问题.