在Vue中使用setTimeout()和setInterval()函數時需要注意哪些問題

本篇文章給大家分享的是有關在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()函數時需要注意哪些問題，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。