当浏览器导航回来时，将调用嵌套在ng-click侦听器内的$ interval
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当浏览器导航回来时，将调用嵌套在ng-click侦听器内的$ interval相关的知识，希望对你有一定的参考价值。
我有一个按钮，点击（ng-click），调用$ interval。如果我导航回包含带有浏览器后退按钮的按钮的状态，则再次调用$ interval。这是一个问题，因为间隔是$ state.go（）的计时器并再次更改状态。
我的代码如下。任何人都可以解释为什么会发生这种情况以及我如何重写它以允许通过浏览器进行向后导航而不会触发$ interval。提前致谢。
控制器：
angular.module('app')
.component('splash', {
templateUrl: '/templates/splash.template.html',
controller: SplashController
})
SplashController.$inject = ['SplashService', '$http', '$stateParams', '$state', '$interval']
function SplashController(SplashService, $http, $stateParams, $state, $interval) {
console.log("you are in the splash Controller")
const vm = this
vm.$onInit = onInit
vm.userAuth = {}
function onInit() {
// $(".button-collapse").sideNav()
}
vm.logIn = function() {
console.log('userAuth: ', vm.userAuth)
SplashService.logIn(vm.userAuth)
}
vm.moveLotus = function() {
let lotus_top = document.getElementById('animated-login-top')
let lotus_bottom = document.getElementById('animated-login-bottom')
// let menuIcon = document.getElementById('menuIcon')
// menuIcon.style.display = 'none'
lotus_top.className = 'animated-login-top-move move-lotus-top'
lotus_bottom.className = 'lotus-login-bottom-pulse move-lotus-bottom'
// wait 2 seconds and then &state.go('feed')
let goTo = function(state) {
$state.go(state)
}
$interval(function() {
goTo('feed')
}, 2500)
}
}
HTML：
<div class="row demoRow center">
<a href="#" ng-click="$ctrl.moveLotus()">Demo Site</a>
</div>
答案
是的，在这种情况下$interval仍然有效，你应该通过$interval.cancel手动停止它$scope.$on('$destroy'...：
angular.module('app', [])
.controller('ctrl', function($scope, $interval) {
var stopTime = $interval(function() {
console.log(new Date());
}, 1000);
$scope.$on('$destroy', () => {
$interval.cancel(stopTime);
});
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<button ng-click='show=!show'>{{show ? 'Destroy' : 'Create'}} controller</button>
<div ng-controller='ctrl' ng-if='show'>
controller
</div>
</div>以上是关于当浏览器导航回来时，将调用嵌套在ng-click侦听器内的$ interval的主要内容，如果未能解决你的问题，请参考以下文章
Selenium click 不适用于 angularjs ng-click 事件
Angular 10：使用浏览器的后退按钮从外部 URL 导航回来时，ngOnInit 未在 Firefox 中部署的应用程序版本中触发