วิธีการล้างหรือหยุด timeInterval ใน angularjs?


91

ฉันกำลังทำการสาธิตซึ่งฉันกำลังดึงข้อมูลจากเซิร์ฟเวอร์หลังจากช่วงเวลาปกติโดยใช้$intervalNow ฉันจำเป็นต้องหยุด / ยกเลิกสิ่งนี้

ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร? หากฉันต้องการเริ่มกระบวนการใหม่ฉันควรทำอย่างไร?

ประการที่สองฉันมีอีกหนึ่งคำถาม: ฉันกำลังดึงข้อมูลจากเซิร์ฟเวอร์หลังจากช่วงเวลาที่ต้องการ มีความจำเป็นต้องใช้$scope.applyหรือ$scope.watch?

นี่คือผู้ทำลายล้างของฉัน:

  app.controller('departureContrl',function($scope,test, $interval){
   setData();

   $interval(setData, 1000*30);

   function setData(){
      $scope.loading=true;
    test.stationDashBoard(function(data){
        console.log(data);
        $scope.data=data.data;
        $scope.loading=false;
        //alert(data);
    },function(error){
        alert('error')
    }) ;

   }
});

http://plnkr.co/edit/ly43m5?p=preview

คำตอบ:


158

คุณสามารถจัดเก็บสัญญาที่ส่งคืนตามช่วงเวลาและใช้$interval.cancel()กับสัญญานั้นซึ่งจะยกเลิกช่วงเวลาของสัญญานั้น ในการมอบหมายการเริ่มต้นและการหยุดของช่วงเวลาคุณสามารถสร้างstart()และstop()ทำหน้าที่ได้ทุกเมื่อที่คุณต้องการหยุดและเริ่มใหม่อีกครั้งจากเหตุการณ์เฉพาะ ฉันได้สร้างตัวอย่างข้อมูลด้านล่างซึ่งแสดงพื้นฐานของการเริ่มต้นและการหยุดช่วงเวลาโดยการนำไปใช้ในมุมมองผ่านการใช้เหตุการณ์ (เช่นng-click) และในตัวควบคุม

angular.module('app', [])

  .controller('ItemController', function($scope, $interval) {
  
    // store the interval promise in this variable
    var promise;
  
    // simulated items array
    $scope.items = [];
    
    // starts the interval
    $scope.start = function() {
      // stops any running interval to avoid two intervals running at the same time
      $scope.stop(); 
      
      // store the interval promise
      promise = $interval(setRandomizedCollection, 1000);
    };
  
    // stops the interval
    $scope.stop = function() {
      $interval.cancel(promise);
    };
  
    // starting the interval by default
    $scope.start();
 
    // stops the interval when the scope is destroyed,
    // this usually happens when a route is changed and 
    // the ItemsController $scope gets destroyed. The
    // destruction of the ItemsController scope does not
    // guarantee the stopping of any intervals, you must
    // be responsible for stopping it when the scope is
    // is destroyed.
    $scope.$on('$destroy', function() {
      $scope.stop();
    });
            
    function setRandomizedCollection() {
      // items to randomize 1 - 11
      var randomItems = parseInt(Math.random() * 10 + 1); 
        
      // empties the items array
      $scope.items.length = 0; 
      
      // loop through random N times
      while(randomItems--) {
        
        // push random number from 1 - 10000 to $scope.items
        $scope.items.push(parseInt(Math.random() * 10000 + 1)); 
      }
    }
  
  });
<div ng-app="app" ng-controller="ItemController">
  
  <!-- Event trigger to start the interval -->
  <button type="button" ng-click="start()">Start Interval</button>
  
  <!-- Event trigger to stop the interval -->
  <button type="button" ng-click="stop()">Stop Interval</button>
  
  <!-- display all the random items -->
  <ul>
    <li ng-repeat="item in items track by $index" ng-bind="item"></li>
  </ul>
  <!-- end of display -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


@ ขอบคุณสำหรับการตอบกลับ .. มีอะไรต้องเพิ่มใช้หรือดูเมื่อฉันดึงข้อมูลจากช่วงเวลาที่ต้องการบริการ
user944513

คุณไม่จำเป็นต้องใช้apply()ถ้าคุณกำลังใช้$intervalบริการเพราะมันทำเพื่อคุณ แต่ถ้าคุณใช้ในตัวsetInterval()คุณอาจต้องใช้$scope.$apply().
ryeballar

ทางออกที่ดีมาก การ$destroyทำงานร่วมกันได้ดีกับสิ่งที่http-auth-interceptorคล้ายกันในกรณีของฉันที่ฉันต้องการหยุดช่วงเวลาระหว่างความล้มเหลวในการตรวจสอบสิทธิ์ (เช่นเซสชันที่หมดอายุ) และเริ่มต้นอีกครั้งหลังจากประสบความสำเร็จในการตรวจสอบสิทธิ์ทั้งหมด ขอบคุณสำหรับโซลูชันที่ยอดเยี่ยมนี้
Neel


9
var promise = $interval(function(){
    if($location.path() == '/landing'){
        $rootScope.$emit('testData',"test");
        $interval.cancel(promise);
    }
},2000);

เนื่องจาก URL อาจมีการเปลี่ยนแปลงในอนาคตฉันจะคิดสองครั้งก่อนที่จะใช้$location.path()และไม่ใช่ชื่อรัฐ
หรือ Duan


1

เมื่อคุณต้องการสร้างสัญญาการจัดเก็บช่วงเวลาให้กับตัวแปร:

var p = $interval(function() { ... },1000);

และเมื่อคุณต้องการหยุด / ล้างช่วงเวลาให้ใช้:

$interval.cancel(p);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.