Vue中使用 setTimeout() setInterval()函数的问题

在vue点击事件调用函数的过程中，想通过 setTimeout() setInterval()函数来延迟修改参数时，发现函数没有执行，控制台也没有报错，代码如下：

var vm_target = new Vue({
        el: '#vm_target',
        data: {
          clickSubmitBtn:false
        },
        methods:{
          myFunc:function(){
            setTimeout(function(){
            this.clickSubmitBtn = true; //此处修改data中的参数时无效
            },500);
          }
        }
       })

之后在调试的时候，发现，setTimeout()函数中的 this 指向的并非vue对象，将this.clickSubmitBtn = true; 修改为 vm_target.clickSubmitBtn = true;之后 ，代码便可以正常执行。

var vm_target = new Vue({
        el: '#vm_target',
        data: {
          clickSubmitBtn:false
        },
        methods:{
          myFunc:function(){
            setTimeout(function(){
            vm_target .clickSubmitBtn = true; //修改此处
            },500);
          }
        }
       })

补充：下面看下vue setTimeout--延迟操作

有时候我们在查询后要做某些事情，例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候，我们可以对渲染数据的操作进行延迟，因为代码执行的速度是很快的而访问数据的操作先对于渲染的速度慢得多，所以往往数据还没查询到而数据就渲染完成了

setTimeout(() =>{
  要延迟的代码
},延迟时间);

总结

以上所述是小编给大家介绍的Vue中使用 setTimeout() setInterval()函数的问题 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

    解决方法如下: 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中使用定时器来修改一个变量值的时候,发现没有效果,这是由于s

  • Vue中使用 setTimeout() setInterval()函数的问题

    在vue点击事件调用函数的过程中,想通过 setTimeout() setInterval()函数来延迟修改参数时,发现函数没有执行,控制台也没有报错,代码如下: var vm_target = new Vue({ el: '#vm_target', data: { clickSubmitBtn:false }, methods:{ myFunc:function(){ setTimeout(function(){ this.clickSubmitBtn = true; //此处修改data中的

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • 如何在Vue中使用debouce防抖函数

    目录 1.防抖函数 2.Vue中使用debouce防抖函数 1.防抖函数 假定两次 Ajax 通信的间隔不得小于2500毫秒,上面的代码可以改写成下面这样. $('textarea').on('keydown', debounce(ajaxAction, 2500)); function debounce(fn, delay){ var timer = null; // 声明计时器 return function() { var context = this; var args = argume

  • Vue中的异步组件函数实现代码

    具体代码如下所示: export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/view/live/live.vue') } ] }) 上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决 新建一个 loadable.vue

  • vue中如何利用js函数截取时间的年月日时分秒

    vue中如何利用js函数截取时间的年月日时分秒

    目录 前言 解决方法: 1. 使用自定义函数格式化时间数据: 2. 利用substring函数截取: 3. 利用left函数截取 4. 利用right函数截取 总结 前言 在vue中,从后台获取数据,如果不是sql语句(类似:select convert(char(10),GetDate(),120) as Date)获取的数据,在前台就会出现如下情况: 解决方法: 1. 使用自定义函数格式化时间数据: (1)年月日: var timearr = time.replace(" ", &

  • 仅IE不支持setTimeout/setInterval函数的第三个以上参数

    复制代码 代码如下: setTimeout(function(obj){ alert(obj.a); }, 2000, {a:1}); 即传了第三个参数,第三个参数将作为回调函数的参数obj传入.在非IE浏览器中都弹出了1.这样有个好处,即解决了回调函数的执行上下文,比如要调用某个对象的某个方法,即可以通过参数把该对象传进去. 复制代码 代码如下: setTimeout(function(obj){ obj.method(); }, 2000, obj); 当然,你还可以传多个参数给回调函数,如

  • Vue中使用setTimeout问题

    目录 Vue使用setTimeout 使用setTimeout存在的潜在问题 总结 Vue使用setTimeout 今天使用setTimeout 来修改一个变量的值以实现提示框的自动消失. 先是这样写,结果发现函数被调用了,但是不是在3秒后. 然后呢,我给加了引号,确实是3秒后触发了,但是 好像是指向有些不对,查了一些资料后成功实现目标, 用以下两种格式写都可以成功调用自己写的方法 使用setTimeout存在的潜在问题 在开发项目中遇到这样的序曲,点击按钮弹框,每次进入的时候都需要默认选中An

  • VUE中setTimeout和setInterval自动销毁案例

    在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉. 正常代码如下: beforeDestroy() { this._timer && clearTimeout(this._timer); } 但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗? 当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.set

  • vue项目中定义全局变量、函数的几种方法

    前言 在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等.这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解.简单总结分享一波,希望对你有所帮助. 定义全局变量 原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块 1.使用全局变量专用模块,挂载到main.js文件上面 全局变量模块Glo

  • vue中定义的data为什么是函数

    目录 一.new Vue场景 二.组件场景 总结 高频面试题:vue中的data为啥是函数? 答案是:是不是一定是函数,得看场景.并且,也无需担心什么时候该将data写为函数还是对象,因为vue内部已经做了处理,并在控制台输出错误信息. 一.new Vue场景 new Vue({ el: "#app", // 方式一:对象 data: { obj: { name: "qb", } }, // 方式二:工厂函数 // data () { // return { //

随机推荐