解决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 省地市级联选择
Feb 07 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php获取某个目录大小的代码
2008/09/10 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
PHP 中文处理技巧
2010/04/25 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php面向对象值单例模式
2016/05/03 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
Jquery 动态生成表格示例代码
2013/12/24 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
js实现表格数据搜索
2020/08/09 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
跟老齐学Python之print详解
2014/09/28 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
wxPython的安装与使用教程
2018/08/31 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
党员公开承诺事项
2014/03/25 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
Golang解析JSON对象
2022/04/30 Golang