$timeout

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

$timeout 这个服务其实就是 Angular 包装之后的 JavaScript 的 setTimeout ... 它可以让我们在指定的一个时间过后去执行一个动作。有点像是一个倒计时器。

我们还是通过一个简单的例子来理解一下这个服务的作用。在想要使用 $timeout 的地方,把它注入进来 ... 比如我们要在这个控制器里使用它,把 $timeout 作为这个函数的一个参数 ..

先在 $scope 上面定义一个方法 ... 叫作 gameOn ... 在这个方法里面, 先在控制台上输出一点文字 ... 使用 $log 服务的 log 方法 ... 输出的东西是 游戏开始 ...

$scope.gameOn = function () {
$log.log('游戏开始...');
}

然后我们再用 $timeout 这个服务 ... 在指定的时间过后去执行一个特定的动作 ... 先用一个 $timeout ... 它的第一个参数就是要执行的动作 ... 也就是一个函数,或者方法 ... 让它执行 $scope 上面的 gameOver ,一会儿我们再去定义这个 gameOver ... 逗号分隔开 ... 第二个参数就是一个倒计时的时间 .. 单位是毫秒 ... 比如我们想在 3 秒钟以后,去执行 gameOver ... 在这里就把这个时间设置成 3000 ... 1000 毫秒等于 1 秒钟 ...

$timeout($scope.gameOver, 3000);

下面再去定义 gameOver ... 同样把它放到 $scope 上面 ... 这个函数要做的就是在控制台上输出 游戏结束 这几个字儿 ...

$scope.gameOver = function () {
$log.info('游戏结束!');
};

保存 ... 再打开 index.html ... 这里我已经在一个元素上用到了 UserController 这个控制器 ... 在这个元素里面,添加一个按钮 ... 按钮上面的文字是 开始游戏 ... 在这个元素上面用一个 ng-click ... 点击它的时候,去执行 gameOn ...

<button ng-click="gameOn()">开始游戏</button>

保存 ... 打开浏览器,去预览一下,打开浏览器的控制台 ... 然后点击这个 开始游戏 按钮 ... 三秒钟以后,会在控制台上显示 游戏结束 ... 这是因为点击了按钮,会去执行 gameOn 这个函数 ... 它先会在控制台上输出 开始游戏 .... 然后 $timeout 这个服务开始计时 ... 在 3 秒以后,会执行一下 gameOver ... 这个函数做的事就是在控制台上输出 游戏结束 ...

$timeout《 AngularJS 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点