کار با تایمرها یا Timer در جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تایمرها یا Timers در جاوااسکریپت با من همراه باشید.

کار با تایمرها یا Timers در جاوااسکریپت

Free-Learn

تایمرها یا Timers در جاوااسکریپت

یه چیزی در جاوااسکریپت داریم به اسم Timing Events ( در لغت به فارسی میشه زمانبندی رویدادها ) ولی خب در کل منظور از این زمانبندی رویدادها، یعنی اجرای یسری دستورات مشخص در یک بازه ی زمانی مشخص.

بفرض مثال ما میخوایم بعد از ۱۰ثانیه در صفحه یک باکس پیغام نمایش داده بشه یا حالا هر کار دیگه، یا شاید بخوایم کاری کنیم که یه دستور در بازه زمانی مشخص ( مثلا هر ۵ ثانیه یکبار ) اجرا بشه، پس در این مواقع میتونیم از این جریان Timing Events استفاده نماییم.

Free-Learn

انواع زمانبندی در جاوااسکریپت

ما ۲ نمونه زمانبندی ( یا روش کار با بازه زمانی ) داریم که این روش ها به شرح زیر می باشند :

  • setTimeout » اجرای یک کد پس از بازه زمانی مشخص
  • setInterval » اجرای یک کد بطور مداوم در یک بازه زمانی مشخص

یعنی اگه خواستیم بگیم مثلا پس از ۱۰ ثانیه فلان کد یا حالاهرچیزی اجرا بشه باید از setTimeout استفاده نماییم و اگه بخوایم بطور مداوم مثلا هر ۵ ثانیه یکبار کدی اجرا بشه باید از setInterval استفاده نماییم.

Free-Learn

متد setTimeout در جاوااسکریپت

خب گفتیم با استفاده از این متد میتونیم کاری رو بعد از مدت زمان مشخصی اجرا کنیم، پس دیگه بدونید این متد برای اجرای یک تابع پس از یک مدت زمان مشخص می باشد.

شکل کلی متد setTimeout :

  • Function : اون کد یا برنامه یا تابعی که قراره اجرا بشه
  • Time_Wit_Millisecond : مدت زمان به میلی ثانیه که باید سپری شود تا تابع اجرا شود

هر ۱۰۰۰ میلی ثانیه ای ۱ ثانیه می باشد.

مثال شماره ۱ : بعد از ۳ ثانیه یه پیغام در صفحه ظاهر میشه

امتحان کنید

مثال شماره ۲ :تغییر مسیر صفحه بعد از ۲ ثانیه به صفحه دیگر

امتحان کنید

Free-Learn

متد setInterval در جاوااسکریپت

با استفاده از این متد میتونیم یک تابع ( تکه کد یا برنامه ) رو در مدت زمان مشخصی بطور مداوم اجرا کنیم، مثلا یه تابع رو هر ۵ثانیه یکبار در صفحه اجرا کنیم.

شکل کلی متد setInterval :

  • Function : اون کد یا برنامه یا تابعی که قراره اجرا بشه
  • Time_Wit_Millisecond : فاصله زمانی بین اجرا شدن تابع – زمان با میلی ثانیه

هر ۱۰۰۰ میلی ثانیه ای ۱ ثانیه می باشد.

مثال شماره ۱ : هر ۲ ثانیه یکبار کلمه ” فری لرن ” در صفحه چاپ میشود

امتحان کنید

مثال شماره ۲ : رفرش شدن صفحه در هر ۵ ثانیه یکبار بصورت خودکار

امتحان کنید

مثال شماره ۳ : نمایش زنده ساعت

امتحان کنید

Free-Learn

نحوه متوقف کردن setTimeout

خب فرض میکنیم ما زمانبندی رو با استفاده از setTimeout ایجاد کردیم، حال ممکنه بعدش بخوایم این زمانبندی رو از بین ببریم یا حذفش کنیم، باید چکار کرد!؟ به راحتی و با استفاده از متد clearTimeout میتونیم تایمر رو Stop یا متوقف کنیم.

شکل کلی متد ()clearTimeout :

  • Timer_Variable : نام اون متغیری که زمانبندی رو داخلش نگهداری میکنه

مثال : در مثال زیر بعد از ۵ ثانیه یه پیغام نمایش داده خواهد شد، ولی خب میشه با کلیک بروی دکمه از نمایش پیغام جلوگیری کرد ( یعنی در واقع متوقف کردن تایمر )

امتحان کنید

Free-Learn

نحوه متوقف کردن setInterval

با استفاده از این متد نیز میتونیم اجرای متد setInterval رو Stop یا متوقف کنیم.

شکل کلی متد ()clearInterval :

  • Timer_Variable : نام اون متغیری که زمانبندی رو داخلش نگهداری میکنه

مثال : در مثال زیر قراره هر ۲ ثانیه یکبار کلمه فری لرن در صفحه چاپ بشه، ولی خب با کلیک با بروی دکمه میخوایم تایمر رو متوقف کنیم.

امتحان کنید

Free-Learn

مثال های بیشتر

مثال شماره ۱ : ایجاد یک تایمر کم شونده ( تایمر معکوس یا Countdown Timer ) – نمونه اول

امتحان کنید

مثال شماره ۲ : ایجاد یک تایمر کم شونده ( تایمر معکوس یا Countdown Timer ) – نمونه دوم

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب