在 AngularJS 中使用 $timeout 而不是 window.setTimeout 有什么好处? [英] What advantage is there in using the $timeout in AngularJS instead of window.setTimeout?
问题描述
我有一个建议来实现这样的超时:
$timeout(function() {//在此处加载完成 - 再显示 3 秒消息.$超时(功能(){$scope.showMessage = false;}, 3000);}, 2000);};
谁能告诉我使用它而不是使用 setTimeout 的原因/优势是什么?
基本的话 $timeout
指的是 angularjs 当 setTimeout
- 到 JavaScript 时.
如果你仍然想使用setTimeout
,那么你需要在
$scope.$apply()
作为旁注
我建议你阅读 如果我有 jQuery 背景,我如何在 AngularJS 中思考"? 发布
和 AngularJS:使用 $timeout,而不是 setTimeout
示例 1:$timeout
$scope.timeInMs = 0;var countUp = function() {$scope.timeInMs+= 500;$timeout(countUp, 500);}$timeout(countUp, 500);
示例2:setTimeout(逻辑相同)
$scope.timeInMs_old = 0;var countUp_old = 函数(){$scope.timeInMs_old+= 500;设置超时(函数(){$scope.$apply(countUp_old);}, 500);}设置超时(函数(){$scope.$apply(countUp_old);}, 500);
演示 小提琴
$timeout 也返回一个 promise
JS
function promiseCtrl($scope, $timeout) {$scope.result = $timeout(function({返回准备好了!";}, 1000);}
HTML
{{结果 ||正在准备……"}}
$timeout 也会触发摘要循环
考虑我们有一些 3d 方代码(不是 AngularJS),比如 Cloudinary 插件,它上传一些文件并返回进度"百分比回调.
//......on("cloudinaryprogress",功能(e,数据){var name = data.files[0].name;var file_ = $scope.file ||{};file_.progress = Math.round((data.loaded * 100.0)/data.total);$超时(功能(){$scope.file = file_;}, 0);})
我们想更新我们的 UI aka $scope.file = file_;
所以 empty $timeout
为我们完成了这项工作,它会触发摘要循环并且由 3d 方更新的 $scope.file
将是在 GUI 中重新渲染
I had a suggestion to implement a timeout like this:
$timeout(function() {
// Loadind done here - Show message for 3 more seconds.
$timeout(function() {
$scope.showMessage = false;
}, 3000);
}, 2000);
};
Can someone tell me what is the reason / advantage in using this rather than using setTimeout?
In basic words $timeout
refers to angularjs when setTimeout
- to JavaScript.
If you still think to use setTimeout
therefore you need invoke $scope.$apply()
after
As a side note
I suggest you to read How do I "think in AngularJS" if I have a jQuery background? post
and AngularJS: use $timeout, not setTimeout
Example 1: $timeout
$scope.timeInMs = 0;
var countUp = function() {
$scope.timeInMs+= 500;
$timeout(countUp, 500);
}
$timeout(countUp, 500);
Example 2: setTimeout (same logic)
$scope.timeInMs_old = 0;
var countUp_old = function() {
$scope.timeInMs_old+= 500;
setTimeout(function () {
$scope.$apply(countUp_old);
}, 500);
}
setTimeout(function () {
$scope.$apply(countUp_old);
}, 500);
Demo Fiddle
$timeout also returns a promise
JS
function promiseCtrl($scope, $timeout) {
$scope.result = $timeout(function({
return "Ready!";
}, 1000);
}
HTML
<div ng-controller="promiseCtrl">
{{result || "Preparing…"}}
</div>
$timeout also trigger digest cycle
Consider we have some 3d party code (not AngularJS) like Cloudinary plugin that uploads some file and returns us 'progress' percentage rate callback.
// .....
.on("cloudinaryprogress",
function (e, data) {
var name = data.files[0].name;
var file_ = $scope.file || {};
file_.progress = Math.round((data.loaded * 100.0) / data.total);
$timeout(function(){
$scope.file = file_;
}, 0);
})
We want to update our UI aka $scope.file = file_;
So empty $timeout
does the job for us, it will trigger digest cycle and $scope.file
updated by 3d party will be re-rendered in GUI
这篇关于在 AngularJS 中使用 $timeout 而不是 window.setTimeout 有什么好处?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!