[英]how to pause angular interval timer when hovering over slide
為什么我可以將eventlisterner放置到我的代碼中,以便當鼠標光標懸停在一張幻燈片上時,計時器停止暫停?
$scope.jobNotification = 0;
var timer;
$scope.startAuto = function() {
timer = $interval(function(){
$scope.jobNotification = ($scope.jobNotification + 1) % $scope.jobs.length;
}, 5000);
};
$scope.isActive = function (index) {
return $scope.jobNotification === index;
};
$scope.showJobNotification = function (index) {
if (timer){
$interval.cancel(timer);
$scope.startAuto();
}
$scope.jobNotification = index;
};
您可以使用ng-mouseenter和ng-mouseleave指令來停止和啟動您的計時器,更新后的監聽器http://plnkr.co/edit/09bf3T?p=preview :
$scope.stopAuto = function() {
console.log('tickCtrl.stopAuto() triggered');
if(timer) {
$interval.cancel(timer);
timer = undefined;
}
}
<ul ng-mouseover="stopAuto()" ng-mouseleave="startAuto()">
<li data-ng-repeat="job in jobs" ng-show="isActive($index)">
<h1>{{job.jobTitle}}</h1>
<p>{{job.sector}}</p>
</li>
</ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.