vue 解决setTimeOut和setInterval函数无效报错的问题
1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的,现遇到一个点击按钮出现倒计时30S的效果
相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行
需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。
2.按照最原始的倒计时效果,实现如下:
//获取30s 控制操作倒计时 time(){ if(this.timeWait <= 0){ this.timeWait = 0; return; }else{ this.timeWait--; } setTimeout(function(){ this.time(); }, 1000) },
此处出现了错误,报错信息为time未定义,此处对于定时器方法其实并没有错
3.原因是 老生常谈的javaScript 的this 的问题。
因为用的一个
function(){
}
这里的 独立的作用域 this指向了全局(这里是window)而且window里没有time这个函数报了错。
4.用过vue的朋友应该,基本vue中都是this.XXX这样写。这里的this是Vue对象。
所以为了使this正确指向vue,我用了ES6的尖头函数。
setTimeout(() => { this.time(); }, 1000)
尖头函数因为它的特殊性,它的this指向它外层的对象。
补充知识:Vue使用Element UI,校验不生效
vue中v-model=v-bind+v-on(@)
所以习惯使用v-model
今天使用Element UI 的el-form
发现el-input无论填什么值校验都过不了,百思不解
最后把v-model改为:model解决
然后看了下文档,确实使用的是:model绑定
真是个弱智的问题
以上这篇vue 解决setTimeOut和setInterval函数无效报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue清除定时器setInterval优化方案分享
两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称: data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器: this.timer = (() => { // 某些操作 }, 1000) 最后在beforeDestroy()生命周期内清除定时器: beforeDestroy() { clearInterval(this.timer); this.timer = null; } 方案1有
-
在vue中使用setInterval的方法示例
昨天在用vue开发项目的时候遇到一个坑,在群友的探讨中,成功的解决了这一问题. 具体情形如下:使用vue开发,在页面中有一个人数统计组件,人数统计是要动态变化数据的,由于目前没有真实数据,那么我想的是用随机数和setInterval来改变data里面的数据,从而做到数据实时变化,这样方便与我来做数字翻页动画. 代码如下: <template> <div class="totel-number"> <div class="panel-top&quo
-
vue 实现setInterval 创建和销毁实例
问题 setInterval 是间隔调用,与之类似的还有 setTimeout.这两个 API 通常用来做 ajax 短连接轮询数据. 比如有一个 logs.vue 是用来展示某个正在执行的进程产生的日志: <template> <div> <p v-for="item in logList" :key="item.time"> <span>{{"[" + item.time + "]&q
-
浅谈vue 组件中的setInterval方法和window的不同
vue组件中,this指向实例,[实例中重写了setInterval等一整套方法].所以,千万不能和 window 下挂载的方法混用 具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回[定时器对象],当然该对象中包含一个_id的私有属性 因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法 vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法 //
-
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
问题: 从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行.如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况. 原因: 当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的. data () { return { ct: null } }, methods: { start() { this.ct= setTimeout( () => {that.countdow
-
vue 解决setTimeOut和setInterval函数无效报错的问题
1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的,现遇到一个点击按钮出现倒计时30S的效果 相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器. 2.按照最原始的倒计时效果,实现如下: //获取30s 控制操作倒计时 time(){ if(this.timeWait <= 0){ this.timeWait =
-
解决VueCil代理本地proxytable无效报错404的问题
前言 因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人: 正文 1. 为什么要使用代理? 代理的作用是:把请求代理转发到其他服务器的中间件: 例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个
-
VUE中setTimeout和setInterval自动销毁案例
在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉. 正常代码如下: beforeDestroy() { this._timer && clearTimeout(this._timer); } 但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗? 当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.set
-
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
本文实例讲述了PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法.分享给大家供大家参考,具体如下: 环境错误级别:error_reporting =E_ALL 某天我在研究一下php下的正则替换函数perg_replace(), 示例: 代码: $subject="2222<b>a</b>2222fff222222222A22222"; $pattern = "/(a)/e&q
-
解决vue v-for 遍历循环时key值报错的问题
一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能
-
vue使用prop可以渲染但是打印台报错的解决方式
vue属性传递时有时会报下述错误 vue.esm.js?f959:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'RegistrationAuthority' of undefined" found in ---> <DialogHistory> at src/components/tools/dialog_history.vue <NurseInfor> at src/
-
vue打包npm run build时候界面报错的解决
用coding-pages打开后显示Failed to load resource: the server responded with a status of 404 (Not Found), 解决方案: 方案一: 找到config里的index.js,打开修改assetsPublicPath 为"./" 方案二: 或者把index.html文件中的路径/去掉: 下面是去掉后的,可以参考下 成功了! 补充知识:启动vue项目 npm run dev 时报errno -4058 进入到
-
Vue使用Echarts图表多次初始化报错问题的解决方法
目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex
-
解决vue2中使用elementUi打包报错的问题
bug1.找不到element-ui/lib/theme-default/index.css 解决:修改路径为 element-ui/lib/theme-chalk/index.css 原因:elementUi升级时遗留bug bug2: ERROR in static/js/app.77ab8a3664d32f2b9c76.js from UglifyJs Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:
-
如何正确解决VuePress本地访问出现资源报错404的问题
背景 最近发现好多小伙伴刚用VuePress,然后一build完就直接用本地浏览器访问,结果出现黑块.仅仅出现那种问题还好,给项目安装 vuepress-plugin-serve 插件就行了, 但是如果有需求是需要离线查看 VuePress 生成后的文档呢?所以我特地研究了一下-- 解决办法 打开 .vuepress/config.js 文件,把 base 的值改成 ./,为了方便调试,最好这样写: //base: "/", base: "./", 写两个,一个用于
随机推荐
- Java使用JDBC连接数据库的实现方法
- 浅谈jsp文件和HTML互相引入的乱码问题
- java自定义注解实现前后台参数校验的实例
- JavaScript实现点击按钮直接打印
- php学习之流程控制实现代码
- Yii中CGridView关联表搜索排序方法实例详解
- Android开发之在程序中时时获取logcat日志信息的方法(附demo源码下载)
- Visual C++中MFC消息的分类
- Android开发设置RadioButton点击效果的方法
- javascript实现的图片预览功能
- nodejs的压缩文件模块archiver用法示例
- 微信公众平台开发-微信服务器IP接口实例(含源码)
- JSP学习经验小结分享
- jquery实现在网页指定区域显示自定义右键菜单效果
- 详解Java的MyBatis框架中动态SQL的基本用法
- jQuery 学习入门篇附实例代码
- javascript实现验证身份证号的有效性并提示
- 国通网讯家园网为您提供120M免费永久空间
- python xpath获取页面注释的方法
- 手动安装python3.6的操作过程详解