Vue项目中使用setTimeout存在的潜在问题及解决
作者:Tencent 时间:2024-05-28 16:00:14
使用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弹框,封装了在关闭动画结束时执行的回调函数,直接在这个回调函数里面执行重置选项的逻辑就好了
上代码
最后楼主采用的是第二种方法来解决闪现的问题的
来源:https://blog.csdn.net/weixin_44217741/article/details/107085180
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
mysql 8.0.22 安装配置方法图文教程
![](https://img.aspxhome.com/file/2023/0/69840_0s.png)
关于AJAX缓存数据
Python实现矩阵转置的方法分析
![](https://img.aspxhome.com/file/2023/3/112043_0s.png)
Python Series从0开始索引的方法
JavaScript设计模式之单例模式
JS获取数组最大值、最小值及长度的方法
MySQL存储引擎InnoDB与Myisam的区别分析
mysql如何实现多行查询结果合并成一行
asp中的rs.open与conn.execute的区别说明
Python判断一个list中是否包含另一个list全部元素的方法分析
Python使用函数默认值实现函数静态变量的方法
django1.8使用表单上传文件的实现方法
pycharm 使用心得(二)设置字体大小
![](https://img.aspxhome.com/file/2023/9/101729_0s.jpg)
深入了解vue2与vue3的生命周期对比
在 Golang 中实现 Cache::remember 方法详解
Python接收Gmail新邮件并发送到gtalk的方法
Python使用mmap实现内存映射文件操作
![](https://img.aspxhome.com/file/2023/1/81611_0s.png)
Go高级特性探究之稳定排序详解
利用python list完成最简单的DB连接池方法
![](https://img.aspxhome.com/file/2023/9/95319_0s.jpg)
MySQL导致索引失效的几种情况
![](https://img.aspxhome.com/file/2023/7/105217_0s.png)