解决vue的变量在settimeout内部效果失效的问题


Posted in Javascript onAugust 30, 2018

解决方法如下:

1、定义一个self暂存this

2、再改变变量的值,则生效啦

var self=this;
    this.toastrVal = inVal;
    this.loadState = true;
    this.noBg = bgState;
    setTimeout(function () {
     self.loadState = false;
    }, 3000)

拓展知识:解决vue在setTimeout内修改this失效的问题

当在vue中使用定时器来修改一个变量值的时候,发现没有效果,这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,这会使得this指向的是window对象。

要想setTimeout指向正确的值,可以使用如下方法:

1、使用箭头函数

export default {
 data () {
  return {
   left: -9999,
   bottom: -9999
  }
 },
 methods: {
  cancelMask: function () {
   setTimeout(() => {
    this.bottom = 0;
    this.left = 0;
   }, 500);
  }
 }
}

此时函数的this指向的是定义它的时候的对象,也就是this指向了data内中对应的变量。

2、将当前对象的this保存为一个变量

export default {
 data () {
  return {
   left: -9999,
   bottom: -9999
  }
 },
 methods: {
  cancelMask: function () {
   var that = this;
   setTimeout(function () {
    that.bottom = 0;
    that.left = 0;
   }, 500);
  }
 }
}

方法中将this存在一个对象中,此时执行setTimeout函数时,setTimeout函数内的that就会访问到这个变量,就会得到当前对象。

以上这篇解决vue的变量在settimeout内部效果失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
js读取本地文件的实例
Dec 22 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 #Javascript
详解React native fetch遇到的坑
Aug 30 #Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 #Javascript
原生JS实现简单的倒计时功能示例
Aug 30 #Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
You might like
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
致跳高运动员广播稿
2014/01/13 职场文书
承认错误的检讨书
2014/01/30 职场文书
会务接待方案
2014/02/27 职场文书
工地标语大全
2014/06/18 职场文书
车间核算员岗位职责
2014/07/01 职场文书
关于教师节的广播稿
2014/09/10 职场文书
完整版商业计划书
2014/09/15 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
给朋友的道歉短信
2015/05/12 职场文书
法定代表人资格证明书
2015/06/18 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
用Python可视化新冠疫情数据
2022/01/18 Python