امیدوارم
از مقالات قبلی لذت برده باشید. در این مقاله میخواهم در مورد $watch صحبت کنم.
سوال اول: $watch چیست و چه کاربردی دارد؟
$watch همان عملکرد Watching در AngularJS را انجام میدهد؛ ولی کاربردهای جالبی دارد. به کد زیر دقت کنید.
var errorChat=false;
$scope.$watch(function () {
return errorChat;
}, function (newValue, oldValue) {
if(newValue ==true){
alert('قسمت محاوره سامانه با مشکل روبرو شده است لطفا با مدیریت تماس بگیرید')
}
});
فرض کنید سناریوی پروژه به این صورت است که ما قسمتهای مختلفی را در صفحه داریم و یکی از این قسمتها، چت روم میباشد. میخواهیم در صورتیکه خطای اتصال و یا هر نوع خطایی در این قسمت بود، با پیغامی به کاربر گزارش داده شود. ما از متغیر errorChat برای این کار استفاده کردهایم. با فرض اینکه در توابع دیگر در صورتیکه خطایی وجود داشته باشد، مقدار این متغیر را true میکند و ما بر حسب رصد این متغیر پیغام خطا را نمایش میدهیم.
سوال دوم: این کد به نحوه احسن کار میکند؛ پس مشکل کجاست؟
مشکل اینجاست بعد از اینکه متغیر errorChat مقدار true گرفت و ما هشدار را نمایش دادیم، باز این متغییر رصد میشود که لزومی به این کار نیست (فرض ما بر این است که بعد از بروز خطا دیگر قسمت چت روم کار نخواهد کرد) و متوقف کردن این متغیر باعث میشود Performance در نهایت بهتر شود. خوب برای اینکه رصد این متغییر را متوقف کنیم از کد زیر استفاده میکنیم. به کد زیر توجه کنید:
var errorChat=false;
var stop=$scope.$watch(function () {
return errorChat;
}, function (newValue, oldValue) {
if(newValue ==true){
stop();
alert('قسمت محاوره سامانه با مشکل روبرو شده است لطفا با مدیریت تماس بگیرید')
}
}); خوب؛ فکر کنم تفاوت این دو کد با هم روشن است. ما یک متغییر stop به کد اضافه کردیم. این متغیر با تابع متوقف کننده $watch مربوط به errorChat پر میشود و در نهایت با اجرای این تابع، عمل watching متغییر errorChat متوقف میشود. اگر با setInterval یا setTimeout در Javascript کار کرده باشید، شباهت این موردها را متوجه خواهید شد.