AngularJS $timeout and $interval

अब हम सीखेंगे AngularJS Tutorial का एक और बहुत उपयोगी और real-world applications में बार-बार इस्तेमाल होने वाला advanced chapter:

⏱️ AngularJS $timeout और $interval

(Delay और Repeating Tasks के लिए AngularJS का Timer System)

---

📌 $timeout और $interval क्या हैं?

AngularJS में setTimeout और setInterval जैसी JS methods का alternative होते हैं:

AngularJS	JavaScript Equivalent
$timeout	setTimeout()
$interval	setInterval()

फर्क क्या है?

AngularJS वाले methods Angular के अंदर ही run होते हैं और automatic digest cycle को trigger करते हैं — जिससे UI update सही से होता है।

---

✅ 1. $timeout: Delay के लिए

Syntax:

$timeout(function, delayInMilliseconds, [invokeApply], [passParameters]);

Example:

app.controller("timeoutCtrl", function($scope, $timeout) {
  $scope.message = "Loading...";

  $timeout(function() {
    $scope.message = "Welcome to AngularJS!";
  }, 2000);
});

यहाँ 2 seconds बाद message auto update हो जाएगा।

---

✅ Button Click से Delay Logic

<button ng-click="loadData()">Load Data</button>
<p>{{ message }}</p>

$scope.loadData = function() {
  $scope.message = "Fetching...";
  $timeout(function() {
    $scope.message = "Data Loaded!";
  }, 3000);
};

---

✅ 2. $interval: Repeat के लिए

Syntax:

$interval(function, intervalInMilliseconds, [count], [invokeApply], [passParameters]);

Example:

app.controller("intervalCtrl", function($scope, $interval) {
  $scope.counter = 0;

  $interval(function() {
    $scope.counter++;
  }, 1000);
});

यह हर 1 second में counter को +1 करेगा।

---

✅ Auto-Stop करने वाला $interval

var stop = $interval(function() {
  $scope.timer++;
  if ($scope.timer === 10) {
    $interval.cancel(stop);
  }
}, 1000);

10 बार चलने के बाद interval खुद बंद हो जाएगा।

---

❗ क्यों न use करें setTimeout() / setInterval()?

Problem	Reason
AngularJS को बदलाव का पता नहीं चलेगा
Scope update नहीं होगा
UI refresh नहीं होगा
आपको manual $apply() लगाना पड़ेगा

✅ इसलिए हमेशा $timeout() और $interval() prefer करें!

---

🔄 $interval.cancel() और $timeout.cancel()

अगर आप किसी reason से timer को बीच में रोकना चाहते हैं:

var timer = $timeout(...);
$timeout.cancel(timer);

var repeater = $interval(...);
$interval.cancel(repeater);

---

🔧 Use Cases

Use Case	Method
Splash screen 3 seconds बाद hide करना	$timeout()
Countdown timer	$interval()
Auto-save feature	$interval()
Snackbar/alert 5 seconds में हटाना	$timeout()
Live Clock	$interval()
Polling server हर 10 सेकंड में	$interval()

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में setTimeout() का कौन-सा replacement होता है?
2. $timeout() में कितने parameters होते हैं और उनका use क्या है?
3. नीचे दिए गए code में क्या issue हो सकता है?

setTimeout(function() {
  $scope.status = "Done!";
}, 2000);

---

✅ आपने क्या सीखा?

• $timeout और $interval AngularJS के timer methods हैं
• ये digest cycle के साथ work करते हैं — जिससे UI auto update होता है
• setTimeout() और setInterval() की जगह AngularJS methods safe हैं
• आप कैसे timers cancel कर सकते हैं
• Real-world use cases: countdown, splash screen, polling, etc.

---

🎯 अब आप AngularJS में time-based logic भी implement कर सकते हैं — बिना manual $apply() के और पूरी तरह Angular-friendly तरीके से।