RN中的幾種定時器
阿新 • • 發佈:2019-02-20
第一類,加入定時器中的任務可能會延遲當前正在進行的動畫。
1、setTimeout, clearTimeout
2、setInterval, clearInterval
3、setImmediate
, clearImmediate
4、requestAnimationFrame, cancelAnimationFrame
使用:在需要的地方或者在componentDidMount
中用前面的方法(分別是setTimeout
、setInterval
、setImmediate
、requestAnimationFrame
)開啟定時器,通常是:
componentDidMount() {
this .timer = setTimeout(
() => { console.log('把一個定時器的引用掛在this上'); },
500
);
}
``` 把定時器的引用掛在this上。注意,在元件被銷燬的時候晴空定時器:
<div class="se-preview-section-delimiter"></div>
這裡寫程式碼片
“`
componentWillUnmount() {
// 如果存在this.timer,則使用clearTimeout清空。
// 如果你使用多個timer,那麼用多個變數,或者用個數組來儲存引用,然後逐個clear
this.timer && clearTimeout(this.timer);
}
requestAnimationFrame():在一段時間內只執行一次,在每幀重新整理之後執行。
setTimeout():只執行一次,會盡可能快的執行。
setImmediate():只執行一次,立即執行。
setInterval():每隔設定的時間便會執行一次,不是立即執行。
第二類,在稍後執行,不會延遲當前進行的任務。
InteractionManager.runAfterInteractions(() => {
// ...需要長時間同步執行的任務...
});