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弹框，封装了在关闭动画结束时执行的回调函数，直接在这个回调函数里面执行重置选项的逻辑就好了
上代码
最后楼主采用的是第二种方法来解决闪现的问题的
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何实现简易的弹出框，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
大家都知道使用 Openlayers可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的，本文记录下 Vue 使用 OpenLayers 入门，使用 OpenLayers 创建地图组件的相关知识，需要的朋友一起学习下吧2021-09-09
Vue 3 + Element Plus树形表格全选多选及子节点勾选的问题解决方
在本文中,我们解决了Vue 3和Element Plus树形表格中的全选、多选、子节点勾选和父节点勾选等常见问题,通过逐步实现这些功能,您可以构建功能强大且用户友好的树形表格组件,以满足各种数据展示需求,对Vue 3 Element Plus树形表格相关知识感兴趣的朋友一起看看吧2023-12-12
使用组件库时,图标往往不能满足需求,所以我们常常需要用到第三方图标库,这篇文章主要给大家介绍了关于vue引入iconfont的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue项目环境搭建、启动、项目移植、项目目录结构分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
这篇文章主要介绍了Vue Class Component类组件用法，组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强2022-12-12
这篇文章主要给大家介绍了关于vue+echarts图表的基本使用步骤,Echarts是一款基于JavaScript的开源可视化图表库,而Vue是一种流行的JavaScript框架,用于构建用户界,需要的朋友可以参考下2023-11-11
下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在vue中当我们管理数据的时候比较乱，我们要用到下面的这个库，本文主要介绍了如何使用 Vuex的入门教程，具有一定的参考价值，感兴趣的可以了解一下2022-02-02
最新评论