Vue框架內部提供了定時器函數,可以實現定時執行代碼的功能。這個定時器函數被封裝在vue的實例方法中,可以在組件中直接使用。下面我們就來介紹vue定時器函數的使用方法。
定時器函數的語法如下:
setInterval(function, milliseconds)
其中第一個參數是需要執行的函數體,第二個參數是時間間隔。我們可以在vue的實例中使用這個定時器函數。下面這個實例演示了如何每秒鐘執行一次一個函數:
created() { setInterval(() =>{ this.count++ }, 1000) }
這段代碼中,我們在vue實例created生命周期函數中創建了一個定時器。每隔一秒,定時器會執行一個箭頭函數,這個函數會使count屬性加1。(前提是我們已經在data中定義了count屬性)。
同樣的,我們也可以使用setInterval清除定時器。比如說下面這個函數會在頁面渲染后5秒鐘后執行一個函數,并在執行后清除定時器:
mounted() { let timer = setInterval(() =>{ this.message = ‘This will clear after 5 seconds’ }, 1000) setTimeout(() =>{ clearInterval(timer) this.message = ‘Timer cleared!’ }, 5000) }
這段代碼中,我們在mounted函數中創建了一個定時器,每隔一秒鐘執行一次函數,使message屬性更新。5秒鐘后我們使用setTimeout清除定時器,并將message屬性更新為“Timer cleared!”。
定時器函數是vue極為實用的一個功能,可以給我們帶來很多便利。當我們需要周期性地執行一些代碼或定時清除某些定時器時,可以使用這個函數。通過上述實例,相信您已經掌握了定時器函數的使用方法,下面就來親自嘗試實現吧。