解决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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
公司庆典主持词
2015/07/04 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python