Vue中使用setTimeout问题
目录
- Vue使用setTimeout
- 使用setTimeout存在的潜在问题
- 总结
Vue使用setTimeout
今天使用setTimeout 来修改一个变量的值以实现提示框的自动消失。
先是这样写,结果发现函数被调用了,但是不是在3秒后。
然后呢,我给加了引号,确实是3秒后触发了,但是
好像是指向有些不对,查了一些资料后成功实现目标,
用以下两种格式写都可以成功调用自己写的方法
使用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项目中使用setTimeout存在的潜在问题及解决
目录 使用setTimeout存在的潜在问题 上代码 总结 使用setTimeout存在的潜在问题 在开发项目中遇到这样的序曲,点击按钮弹框,每次进入的时候都需要默认选中Android, 这个时候就遇到了一个小坑,当用户点击弹框后,选择iOS,再点击cancel或者OK,楼主在开发的时候,点击cancel按钮,执行下面代码 this.showDialog = false; // 关闭弹框 this.createForm.platform = "Android"; // 重置下拉框的默认
-
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
先看效果图,这是弹窗效果,要求就是弹窗出现和消失时候不是很突兀,要有过渡效果. 首先看弹窗出现的实现思路,先加一个beforeActive类,再加一个active类.我们看审查元素,一开始display:none: 在beforeActive中display:block:只是background: transparent;然后在一定时间后再加上active类.问题就来了,在打开弹窗代码中,如下图,settimeout第二个参数小于60ms效果就会不稳定,有时候有过渡效果,有时候没有过渡效果. /
-
vue 解决setTimeOut和setInterval函数无效报错的问题
1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的,现遇到一个点击按钮出现倒计时30S的效果 相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器. 2.按照最原始的倒计时效果,实现如下: //获取30s 控制操作倒计时 time(){ if(this.timeWait <= 0){ this.timeWait =
-
VUE中setTimeout和setInterval自动销毁案例
在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉. 正常代码如下: beforeDestroy() { this._timer && clearTimeout(this._timer); } 但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗? 当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.set
-
Vue中使用 setTimeout() setInterval()函数的问题
在vue点击事件调用函数的过程中,想通过 setTimeout() setInterval()函数来延迟修改参数时,发现函数没有执行,控制台也没有报错,代码如下: var vm_target = new Vue({ el: '#vm_target', data: { clickSubmitBtn:false }, methods:{ myFunc:function(){ setTimeout(function(){ this.clickSubmitBtn = true; //此处修改data中的
-
Vue 2.0学习笔记之Vue中的computed属性
Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}
-
Vue中之nextTick函数源码分析详解
1. 什么是Vue.nextTick()? 官方文档解释如下: 在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2. 为什么要使用nextTick? <!DOCTYPE html> <html> <head> <title>演示Vue</title> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"&
-
在vue中获取dom元素内容的方法
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted
-
在vue中通过axios异步使用echarts的方法
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js
-
简单理解Vue中的nextTick方法
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1&q
-
vue中echarts3.0自适应的方法
前端时间做一个vue的项目,echart是按需引入的如下: // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入折线图 import 'echarts/lib/chart/line' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legendScroll' 然后发现在缩放浏览器窗口时折线图并不会自适应
-
在vue中封装可复用的组件方法
本次封装的组件以toast组件为例 以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程 先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构
-
vue中手机号,邮箱正则验证以及60s发送验证码的实例
今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中. <div> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button"
随机推荐
- 代替正则——HyperScriptExpression联合开发倡议公告
- PHP动态输出JavaScript代码实例
- sftp和ftp 根据配置远程服务器地址下载文件到当前服务
- asp.net 实现动态显示当前时间(不用javascript不考虑开销)
- 基于javascript制作微博发布栏效果
- Django框架中方法的访问和查找
- python使用append合并两个数组的方法
- JSP入门教程(2)
- 详解能在多种前端框架下使用的表格控件
- php常用的安全过滤函数集锦
- 用shell脚本和c语言将大写字母转成小写的代码
- 浅谈jQuery绑定事件会叠加的解决方法和心得总结
- 使用jQuery中的wrap()函数操作HTML元素的教程
- JS实现的最简Table选项卡效果
- javascript用层模拟可移动的小窗口
- 微信小程序 audio音频播放详解及实例
- C# 无边框窗体边框阴影效果的简单实现
- andoid打包短信发送到gmail邮箱实现代码
- 网络路由技术基础
- 8号巴士_BT_eMule_迅雷_剧情介绍下载
其他
- mysql2002错误
- elemenui组织架构
- 易语言怎么取系统桌面
- jquery点击图片切换隐藏
- linux springboot 假死怎么解决
- android studio 自动补全失效
- 车牌分割方法 opencv
- cookie secure作用
- 中华优秀传统文化turtle绘图
- python websocket服务端
- prism wpf 源码
- python pyqt5 不同虚拟环境要配置多个环境变量
- vue 访问vue tomcat 加载不到资源
- 事务 的代理对象使用this会失效
- Python边缘提取
- python scp拷贝文件夹
- jsonobject 按照value排序
- js关于路径映射说法正确的是
- .net 绑定下拉框
- tkmybatis 自定义sql 的分页实现