Vue项目中使用setTimeout存在的潜在问题及解决
使用setTimeout存在的潜在问题
在开发项目中遇到这样的序曲，点击按钮弹框，每次进入的时候都需要默认选中Android，
这个时候就遇到了一个小坑，当用户点击弹框后，选择iOS，再点击cancel或者OK，楼主在开发的时候，点击cancel按钮，执行下面代码
this.showDialog = false; // 关闭弹框 this.createForm.platform = "Android"; // 重置下拉框的默认选择项为Android this.createForm.secureCoreVersion = ""; // 清空输入框的东西
然后
这几行代码在逻辑上看是正确的逻辑，但是实际页面上显示的样子，却不一样，点击cancel按钮的时候，弹框关闭，但是弹框会在关闭前的一刻，下拉框选中的iOS 会闪一下，变成Android，体验不是很好，于是，楼主想到了使用setTimeout来解决问题，遂写成如下代码
this.showDialog = false;
setTimeout(() => {
this.createForm.platform = "Android";
this.createForm.secureCoreVersion = "";
}, 500);
把 清空弹框里面表单的东西放在了定时器里面，这样就能避免在点击关闭按钮的时候，下拉框选项闪一下，变成默认选项Android的问题。
但是，过了1天，有个同事跑过来跟我说，楼主的写法存在一定的潜藏风险，那就是使用了setTimeout定时器来处理这个问题，
他的回答是：
定时器一般只能用在写动画里面，日常的业务逻辑层代码尽量不要使用定时器，因为定时器虽然表面上能解决这个问题，但是，如果用户在设置的500毫秒以内再次点击cancel按钮，就会出现问题，定时器的原理实际上就是把js执行的这段代码拿到一个宏任务里面，最后执行
于是乎，p7水平的同事，跟我这样说，可以换一种思路，
可以在点击弹框弹出来的时候把弹框里面的选项都进行重置，不需要在关闭弹框的时候进行重置，其实是一个逆向思维的问题，在一开始点击弹框打开的时候直接重置参数，这样就能巧妙的绕过在关闭弹框出现的问题通过elementUI dialog 组件自带的 closed 回调函数来解决问题
elementUI 的官网里面关于dialog弹框，封装了在关闭动画结束时执行的回调函数，直接在这个回调函数里面执行重置选项的逻辑就好了
上代码
最后楼主采用的是第二种方法来解决闪现的问题的
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
在本篇内容中小编给大家分享了关于Vue中使用canvas方法和步骤，对此有需要的读者们参考学习下。2019-02-02
在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化，并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现2023-03-03
本文主要介绍了vue实现token过期自动跳转到登录页面，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
用户在微信端中访问第三方网页,可以通过微信网页授权机制获取用户的基本信息,进而实现所需要的业务逻辑,这篇文章主要给大家介绍了关于Vue3项目中优雅实现微信授权登录的相关资料,需要的朋友可以参考下2021-09-09
本篇文章主要介绍了vue配置多页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
el-form表单el-form-item label不换行问题及解决
这篇文章主要介绍了el-form表单el-form-item label不换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
下面小编就为大家带来一篇vue2 router 动态传参,多个参数的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最近因为公司的新项目决定使用Vue.js来做，但在使用的过程中发现了一个有趣的事情，因为发现的这个事情展开了一些对于getter和setter的思考，具体是什么下面通过这篇文章来一起看看吧，有需要的朋友们可以参考学习。2016-12-12
vue3导入excel并解析excel数据渲染到表格中(纯前端实现)
在Vue中实现导出Excel有多种方式,可以通过前端实现,也可以通过前后端配合实现,下面这篇文章主要给大家介绍了关于vue3导入excel并解析excel数据渲染到表格中的相关资料,文中介绍的方法是纯前端实现,需要的朋友可以参考下2024-04-04
最新评论