解决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 相关文章推荐
Javascript中Eval函数的使用
Mar 23 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
有关Promises异步问题详解
Nov 13 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
ReactRouter的实现方法
Jan 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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python 将md5转为16字节的方法
2018/05/29 Python
详解Python 函数如何重载?
2019/04/23 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
python字典key不能是可以是啥类型
2020/08/04 Python
线程同步的方法
2016/11/23 面试题
化妆品活动策划方案
2014/05/23 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
联村联户简报
2015/07/21 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
Python实现双向链表基本操作
2022/05/25 Python