2021-8-24 前端達人
js中定時器有兩種，一個是循環執行setInterval，另一個是定時執行setTimeout
一、循環執行（setInterval）
顧名思義，循環執行就是設置一個時間間隔，每過一段時間都會執行一次這個方法,直到這個定時器被銷毀掉
用法是setInterval（“方法名或方法”，“延時”）， 第一個參數為方法名或者方法，注意為方法名的時候不要加括號,第二個參數為時間間隔
<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
data() { return {
timer: '',
value: 0 };
},
methods: {
get() { this.value ++;
console.log(this.value);
}
},
mounted() { this.timer = setInterval(this.get, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
}
}; </script>
上面的例子就是頁面初始化的時候創建了一個定時器setInterval，時間間隔為1秒，每一秒都會調用一次函數get，從而使value的值加一。
二、定時執行 （setTimeout）
定時執行setTimeout是設置一個時間，等待時間到達的時候只執行一次，但是執行完以后定時器還在，只是沒有運行
用法是setTimeout(“方法名或方法”, “延時”); 第一個參數為方法名或者方法，注意為方法名的時候不要加括號,第二個參數為時間間隔
<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
data() { return {
timer: '',
value: 0 };
},
methods: {
get() { this.value ++;
console.log(this.value);
}
},
mounted() { this.timer = setTimeout(this.get, 1000);
},
beforeDestroy() {
clearTimeout(this.timer);
}
}; </script>
上面是頁面初始化時候創建一個定時器setTimeout，只在1秒后執行一次方法。
定時器需要在頁面銷毀的時候清除掉，不然會一直存在?。?！
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務