当浏览器导航时，嵌套在ng-click侦听器中的$ interval被调用

• Z时代
• 2024-01-10
• 分类：问答

我有一个按钮，点击（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> 

回答：

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被调用 的全部内容， 来源链接： utcz.com/qa/266890.html