از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
هنگامی که با برنامه های بلادرنگ، تعاملی یا پویا سروکار دارید، ممکن است لازم باشد یک تابع را هر N ثانیه در TypeScript اجرا کنید. در این بایت، دقیقاً به نحوه انجام این کار خواهیم پرداخت.
چرا از تماس های تابع فاصله زمانی استفاده کنیم؟
سناریوهای مختلفی وجود دارد که ممکن است بخواهید یک تابع را در فواصل زمانی منظم اجرا کنید. داشبورد زنده ای را در نظر بگیرید که باید داده ها را هر چند ثانیه یک بار به روز کند، یک ساعت دیجیتالی که زمان را به روز می کند، یا یک بازی که در آن اقدامات خاصی باید به طور مکرر انجام شوند. همه این موارد استفاده به نوعی مکانیسم برای فراخوانی توابع در یک بازه زمانی مشخص نیاز دارند. اینجاست که فراخوانی تابع فاصله زمانی جاوا اسکریپت (و در نتیجه TypeScript) می تواند به شما کمک کند.
چیست setInterval تابع؟
بیایید ابتدا یکی از عملکردهای کلیدی را که همه اینها را ممکن می‌سازد، درک کنیم: setInterval. این تابع یک تابع Web API شناخته شده است و توسط تمام مرورگرهای مدرن پشتیبانی می شود. برای اجرای مکرر کد پس از مقدار تعیین شده از میلی ثانیه استفاده می شود.
در اینجا نحوه کار آن آمده است:
setInterval(() => {
console.log("Hello, rasanegar readers!");
}, 3000);
در این قطعه، “سلام، خوانندگان rasanegar!” هر 3000 میلی ثانیه (یا 3 ثانیه) روی کنسول چاپ می شود. اولین استدلال به setInterval تابعی است که باید اجرا شود و آرگومان دوم تاخیر بر حسب میلی ثانیه است. در اینجا اولین آرگومان فقط یک تابع پیکان ساده است که اجرا می شود console.log.
توجه داشته باشید: setInterval عملکرد را به طور مکرر در فواصل زمانی منظم اجرا می کند. اگر لازم است یک تابع را فقط یک بار اجرا کنید، باید از تابع دیگری استفاده کنید: setTimeout.
هر N ثانیه یک تابع را فراخوانی کنید
اکنون، بیایید ببینیم که چگونه می توانیم در واقع استفاده کنیم setInterval برای فراخوانی یک تابع در هر N ثانیه. را setInterval عملکرد مشابه با setTimeout، اما به جای اینکه تابع را یک بار پس از تاخیر اجرا کند، آن را به طور مکرر در بازه زمانی مشخص شده اجرا می کند.
در اینجا نحوه استفاده از آن آورده شده است:
setInterval(() => {
console.log("This message will display every 2 seconds");
}, 2000);
در این مثال، “This message will display every 2 seconds” هر 2 ثانیه در کنسول چاپ می شود. اولین استدلال به setInterval تابعی است که باید اجرا شود و آرگومان دوم فاصله بر حسب میلی ثانیه است.
به یاد داشته باشید، فاصله زمانی که مشخص می کنید، زمان است بین فراخوانی تابع، نه زمان از شروع یک تماس تا شروع تماس بعدی. این به این معنی است که اگر اجرای عملکرد شما زمان زیادی طول بکشد، ممکن است فواصل زمانی طولانی تر از آنچه شما مشخص کرده اید باشد.
توجه داشته باشید: برای جلوگیری از فراخوانی تابع، می توانید از clearInterval تابع. این تابع شناسه برگشت داده شده توسط را می گیرد setInterval به عنوان یک استدلال
در اینجا یک مثال است:
let intervalId: NodeJS.Timeout = setInterval(() => {
console.log("This message will display every 2 seconds");
}, 2000);
// Stop the interval after 10 seconds
setTimeout(() => {
clearInterval(intervalId);
}, 10000);
در این قطعه پیام هر 2 ثانیه چاپ می شود اما بعد از 10 ثانیه متوقف می شود. ما استفاده کرده ایم setTimeout تماس گرفتن clearInterval بعد از 10 ثانیه، فاصله را متوقف کنید.
به شیوه واقعی TypeScript، ما نوع برای را نیز اعلام کرده ایم setInterval‘s مقدار بازگشتی که به طور رسمی است NodeJS.Timeout.
خطاهای رایج و نحوه رفع آنها
در حین استفاده setTimeout یا setInterval در TypeScript، ممکن است چند خطای رایج رخ دهد. بیایید نگاهی به برخی از این موارد و نحوه رسیدگی به آنها بیندازیم.
یکی از خطاهای رایج این است Uncaught ReferenceError: function is not defined. این خطا ممکن است زمانی رخ دهد که تابعی که می‌خواهید با آن تماس بگیرید setTimeout در یک محدوده نیست. برای رفع این مشکل، فقط مطمئن شوید که تابع در محدوده ای که در آن قرار دارد در دسترس باشد setTimeout/setInterval نامیده میشود.
function printMessage() {
console.log('Hello, rasanegar!');
}
setTimeout(printMessage, 2000); // This will work
خطای احتمالی دیگر این است Uncaught TypeError: this.method is not a function. این خطا ممکن است زمانی اتفاق بیفتد که this داخل تابع callback به چیزی که شما انتظار دارید اشاره نمی کند. جاوا اسکریپت this می تواند کمی گیج کننده باشد، به خصوص زمانی که با تماس های برگشتی سروکار دارید. یکی از راه‌های رفع این مشکل، استفاده از تابع فلش است که از نظر لغوی پیوند می‌دهد this.
class Printer {
message: string = 'Hello, rasanegar!';
printMessage = () => {
console.log(this.message);
}
}
let printer = new Printer();
setTimeout(printer.printMessage, 2000); // This will work
جایگزین های setTimeout
با اینکه setTimeout یک تابع قدرتمند است، راه های دیگری برای زمان بندی وظایف در TypeScript وجود دارد. یکی از این جایگزین ها است setInterval.
setInterval مشابه کار می کند setTimeout، اما به جای اینکه تابع را یک بار پس از تاخیر اجرا کند، تابع را به طور مکرر در بازه زمانی مشخص شده اجرا می کند.
setInterval(() => {
console.log('This message will repeat every 2 seconds');
}, 2000);
جایگزین دیگر این است requestAnimationFrame تابع. این به ویژه برای انیمیشن ها مفید است، زیرا یک تابع را قبل از رنگ آمیزی مجدد بعدی فراخوانی می کند و امکان ایجاد انیمیشن های روان تر را فراهم می کند.
function animate() {
console.log('Animating...');
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
این یکی برای رندر کردن موارد استفاده است، بنابراین سودمندی آن محدود به آن است.
نتیجه
و در اینجا شما آن را دارید، یک راهنمای اندازه بایت برای فراخوانی یک تابع در هر N ثانیه در TypeScript. ما نحوه انجام این عملکرد، برخی از خطاهای رایجی که ممکن است با آنها مواجه شوید و رفع آنها را پوشش داده‌ایم، و به جایگزین‌های آن نگاه کرده‌ایم. setTimeout.
منتشر شده در 1402-12-26 11:29:03
