Angular 定时器$timeout和$interval
项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘。
$timeout
用法如下 :
$timeout(fn,[delay],[invokeApply]);
- fn:一个将被延迟执行的函数。
- delay:延迟的时间(毫秒)。
- invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply。
方法 :
cancel(promise);
promise:$timeout函数的返回值。
具体使用 :在项目中用到的其中一处是键入字符然后自动发送请求查询,如果每键入一个字符即发送一次请求,在数据库表庞大的时候,数据库肯定会有意见了。这时候就需要用到延时查询了,还需要结合$watch,具体使用如下:
var timeout;
$scope.$watch('idNo', function(newVal, oldVal) {
if(newVal != oldVal) {
if(timeout) {
$timeout.cancel(timeout);
}
timeout = $timeout(function() {
$http.get(url).success(function(data) {});
}, 800);
}
});
如上写法,
if(newVal != oldVal){}
是默认情况下不查询,键入字符后才会发送请求查询,若想默认情况下就查询则需要去掉该if判断。
$timeout.cancel(timeout);
是清除上次$itmeout返回的promise。
$interval
用法如下 :
$interval(fn,delay,[count],[invokeApply],[Pass]);
- fn:一个将被反复执行的函数。
- delay:每次调用的间隔毫秒数值。
- count:循环次数的数值,如果没设置,则无限制循环。
- invokeApply:如果设置为false,则避开脏值检查,否则将调用$apply。
- Pass:函数的附加参数。
方法 :
cancel(promise);
promise:$interval函数的返回值。
具体使用 :
- 经常使用的是
function hello() {
...
console.log("hello world");
}
var timer = $interval(function(){
function hello() {}
},100);
timer.then(function() {
console.log("done");
});
以上是每100毫秒执行hello()函数,每执行完一次则调用then函数。
2. 控制循环的次数:
var timer = $interval(function(){},100,10);
,参数10则是限制定时器循环10次,若该参数没有定义则表示无数次循环。
3. 清除
i
n
t
e
r
v
a
l
定
时
器
:
通
过
‘
interval.cancle(timer)`删除$interval返回的promise即可清除,而且必须要清除,否则会无限循环。在angular controller中只要开始执行定时任务,只要不清除则会一直执行,无论是否切换到其他的controller和页面,可能会导致不必要的错误。
4. 项目中用到的完整实例:
// 定时器 定时刷新数据
var timer = $interval(
function() {
hello();//自己定义的每次需要执行的函数,也可以写一些其他的内容
},
5000
);
//当DOM元素从页面中被移除时,AngularJS将会在scope中触发$destory事件。
//这让我们可以有机会来cancel任何潜在的定时器。切换controller、页面后即可调用
$scope.$on(
"$destroy",
function() {
$interval.cancel( timer );
}
);
若有不到位之处,请给予指正。
関連
-
[解決済み】 node_modules/rxjs/internal/types.d.ts(81,44): エラー TS1005: ';' Angular 6のインストール後に予想されたエラー
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] 型 '{}' は型 '{ title: string; text: string; }' に代入できません。
-
[解決済み] Angular 8 NgForはArray errorやAcces Control Allow originなどのIterableへのバインディングのみをサポートしています。
-
[解決済み] Angular 2.0 翻訳パイプが見つかりません。
-
[解決済み] Angular2の$document.ready()に相当します。
-
[解決済み] このメソッドをリファクタリングして、認知的複雑度を21から許容される15に下げます。リファクタリングして複雑さを軽減する方法
-
[解決済み] Angularで電話番号の入力をフォーマットする
-
[解決済み] Angular2の素材ダイアログに問題あり - @NgModule.entryComponentsに追加しましたか?
-
angualrコマンド(II)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] NullInjectorError: MatDialogRef 用のプロバイダがありません
-
[解決済み] Angular2 Final Release - 「Error: AngularにはZone.jsのプロリフィルが必要です"
-
[解決済み] Typescript - コードが TS1128: Declaration or Statement expected というエラーでビルドに失敗するが、コードを提供すると期待通りに実行される。
-
[解決済み] ActivatedRouteSnapshot の注入ができない。
-
[解決済み] CLIでコンポーネントを削除する最も良い方法は何ですか?
-
[解決済み] ReferenceError: localStorageが定義されていません。
-
[解決済み] ionInputとionChangeで有意差あり
-
[解決済み] AngularのngClassとトグルクラスのクリックイベント
-
[解決済み] Angular 4 - "BrowserAnimationsModule "または "NoopAnimationsModule "のいずれかをアプリケーションに組み込んでください。
-
SpringBoot + STOMPのチャットルーム(シングルチャット+マルチチャット)およびグループメッセージの詳細