H5前端開發社區專注更多編程教程和電子書天天在用錢在vue中，有兩套定時器，一套是瀏覽器API，window對象上的；另一套就是vue/nodejs封裝的，需要引入import { setInterval, clearInterval } from 'timers'建議使用window對象自帶的，因為不容易錯。 如果一不小心只引入一個，就怎么也清不掉了。import { setInterval } from 'timers' // 錯誤一定要在beforeDestroy中清除定時器。data () { return { timer: 0 }},//模塊初始化時打開定時器created () { this.timer = setInterval(() => { //do something //定時器的回調函數中需要注意 this 指向 }, 5000)},//銷毀前清除定時器beforeDestroy () { clearInterval(this.timer)}

js 定時器有以下兩個方法：

• setInterval() ：按照指定的周期(以毫秒計)來調用函數或計算表達式。方法會不停地調用函數，直到 clearInterval() ?被調用或窗口被關閉。

• setTimeout() ：在指定的毫秒數后調用函數或計算表達式。

setInterval()

語法

setInterval(code,millisec,lang)

參數 描述

• code 必需。要調用的函數或要執行的代碼串。

• millisec 必須。周期性執行或調用 code 之間的時間間隔，以毫秒計。

• lang 可選。 JScript | VBScript | JavaScript

以下實例在每 1000 毫秒執行 clock() 函數。實例中也包含了停止執行的按鈕:

在需要重復發送請求或者某些效果的時候，一般都會想到使用setInterval，但是它的一些弊端，會給程序帶來很大的隱患

一、弊端

setInterval對自己調用的代碼是否報錯漠不關心。即使調用的代碼報錯了，它依然會持續的調用下去。

setInterval無視網絡延遲。在使用ajax輪詢服務器是否有新數據時，必定會有一些人會使用setInterval，然而無論網絡狀況如何，它都會去一遍又一遍的發送請求，如果網絡狀況不良，一個請求發出，還沒有返回結果，它會堅持不懈的繼續發送請求，最后導致的結果就是請求堆積。

setInterval并不定時。如果它調用的代碼執行的時間小于定時的時間，它會跳過調用，這就導致無法按照你需要的執行次數或無法得到你想要的結果。

二、解決方案使用setTimeout代替setInterval。 可以給setTimeout設置時間后，在最后調用自身。如果希望“勻速”觸發。可以計算代碼執行時間，用希望的延遲減去上次執行的時間。

注：有一種想法是將setInterval的延遲時間設置的長于上述的幾種時間，來達到絕對的均速調用。但事實上，js的計時器因為自身機制的原因，存在4ms–15ms的誤差。

setTimeout()語法

setTimeout(code,millisec,lang)

參數 描述

• code 必需。要調用的函數后要執行的 JavaScript 代碼串。

• millisec 必需。在執行代碼前需等待的毫秒數。

• lang 可選。腳本語言可以是：JScript | VBScript | JavaScript

如果想要在一個函數中啟用定時器 ?又想在另一個函數關閉這個函數 可以這樣做:

var timer1 = null;function start(){ if ( timer1 ) return; timer1 = setInterval("test()",200);}function end(){ if ( timer1 ) { clearInterval(timer1); timer1 = null; }}

注意事項: 這里的 timer1 相當于setInterval 的 id, 執行clearInterval(timer1)方法時, 就是傳入定時器 ID 進行停止的。

作者：HelloVue
鏈接：https://juejin.cn/post/6917231784581136391
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

●如何從初級程序員順利晉升到高級程序員？

●程序員接私活，怎樣防止做完不給錢？

●程序員的年終總結：阿姨，我不想努力了

●專訪阿里云 Serverless負責人：無服務器不會讓后端失業

*版權聲明：轉載文章和圖片均來自公開網絡，版權歸作者本人所有，推送文章除非無法確認，我們都會注明作者和來源。如果出處有誤或侵犯到原作者權益，請與我們聯系刪除或授權事宜。

溫馨提示

返回上一級?回復?“前端”?,?"視頻"……等你要的資源的關鍵詞，即可得到內部電子書和視頻，或參考關鍵詞回復功能這篇文章

長按關注

H5前端開發社區

你點的每個“在看”，我都認真當成了喜歡

總結

以上是生活随笔為你收集整理的的setinterval函数_Vue定时器与JS 定时器 setInterval() 和 setTimeout()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。