در حال بارگذاری...

زمان‌بندی

کتری یک پاراگراف است، #pot. اسکریپت داخلش cold می‌نویسد. اینجا فرم نیست و زنگ پیشخوان هم نیست.
تایمر اسکریپت را نگه نمی‌دارد. خط بعدی همان لحظه اجرا می‌شود. تابع تایمر دیرتر نوبت می‌گیرد. timeout با ۴۰۰ میلی‌ثانیه hot می‌نویسد. اگر لغوش کنی، کتری سرد می‌ماند. interval یکی‌یکی تا ۳ می‌شمارد و بعد می‌ایستد. خط می‌شود cold / hot / 3.

این زنگ پیشخوان نیست

صفحهٔ قبل same / 4 / undefined / number را به هم چسباند. آن‌جا سند، یک var، یک let و نوع عرض بود. این صفحه آن‌ها را نمی‌خواند. cold و hot کلمه‌هایی هستند که تایمر روی کتری می‌نویسد.
سؤال این است که کلمه کِی عوض می‌شود.

خط بعدی صبر نمی‌کند

setTimeout یک تابع می‌خواهد و یک تأخیر به میلی‌ثانیه. ۴۰۰ یعنی چهار دهم ثانیه، نه ۴۰۰ ثانیه. لاگی که زیر این فراخوانی است اول درمی‌آید، وقتی کتری هنوز cold است. تابع تایمر دیرتر hot می‌نویسد و همان را لاگ می‌کند.

hot دیرتر می‌رسد

javascript 
let pot = document.getElementById("pot");
pot.textContent = "cold";
setTimeout(function () {
pot.textContent = "hot";
console.log(pot.textContent);
}, 400);
console.log(pot.textContent);

لاگ اول cold است. لاگ بعدی hot. اسکریپت ۴۰۰ میلی‌ثانیه همان‌جا ننشست.

جوش را لغو کن

setTimeout یک شناسه برمی‌گرداند. clearTimeout با همان شناسه، تابع را کنار می‌گذارد. کتری cold شده بود و hot هرگز نمی‌آید.

پیش از جوش لغو کن

javascript 
let pot = document.getElementById("pot");
pot.textContent = "cold";
let boil = setTimeout(function () {
pot.textContent = "hot";
}, 400);
clearTimeout(boil);
console.log(pot.textContent);

لاگ cold است. تابع کنار گذاشته شد، پس کتری hot نمی‌شود.

سه بار بریز

setInterval تابع را هی تکرار می‌کند، اینجا هر ۳۰۰ میلی‌ثانیه. هر بار یکی اضافه می‌شود. روی ۳، clearInterval قطعش می‌کند. لاگ همان ۳ است، نه شمارشی که تمام نشود.

روی سه بایست

javascript 
let pot = document.getElementById("pot");
let n = 0;
let tick = setInterval(function () {
n = n + 1;
pot.textContent = String(n);
if (n === 3) {
clearInterval(tick);
console.log(pot.textContent);
}
}, 300);

لاگ 3 است. شناسهٔ interval همان tick است. بی‌clearInterval شمارش بالا می‌رفت.

شناسه عدد است

چیزی که setTimeout برمی‌گرداند عدد است. نه خود تأخیر است، نه کلمهٔ hot. این قطعه یک تابع خالی را فقط برای دیدن نوع شناسه وقت می‌گذارد و بعد لغوش می‌کند تا چیز دیگری اجرا نشود.

شناسهٔ تایمر

javascript 
let boil = setTimeout(function () {}, 400);
console.log(typeof boil);
clearTimeout(boil);

لاگ number است.

صفر هم دیرتر است

تأخیر ۰ یعنی «قبل از خط بعد» نیست. تابع صبر می‌کند تا همین اسکریپت تمام شود. کتری now می‌شود، همان کلمه لاگ می‌شود، و بعد تابع تایمر later را لاگ می‌کند.

تأخیر صفر

javascript 
let pot = document.getElementById("pot");
pot.textContent = "now";
setTimeout(function () {
console.log("later");
}, 0);
console.log(pot.textContent);

لاگ اول now است. لاگ دوم later. صفر جلوی صف نپرید.

تأخیر یعنی چه

واحد میلی‌ثانیه است. ردیف کتری همان است که این صفحه به کار می‌برد.

📊 تأخیر یعنی چه

تأخیر یعنی قاطی‌کردن آسان
0 بعد از تمام شدن همین اسکریپت قبل از خط بعد
400 ۰٫۴ ثانیه ۴۰۰ ثانیه
1000 یک ثانیه یک دقیقه

خط زیر کتری

اسکریپت cold را می‌نویسد و همان لحظه ذخیره می‌کند. timeoutِ ۴۰۰ میلی‌ثانیه hot را ذخیره می‌کند. interval هر ۳۰۰ میلی‌ثانیه یکی اضافه می‌کند، روی ۳ می‌ایستد، و بعد سه کلمه را به هم می‌چسباند. hot زودتر از بار سوم ذخیره می‌شود، چون ۴۰۰ از ۹۰۰ کوچک‌تر است.

نمایش صفحه — تایمر کتری

html 
<!DOCTYPE html>
<html>
<head>
<title>kettle-timer — page</title>
</head>
<body>
<p id="pot">blank</p>
<p id="line">…</p>
<script>
let pot = document.getElementById("pot");
let seen = [];
pot.textContent = "cold";
seen.push(pot.textContent);
setTimeout(function () {
pot.textContent = "hot";
seen.push("hot");
}, 400);
let n = 0;
let tick = setInterval(function () {
n = n + 1;
if (n === 3) {
clearInterval(tick);
seen.push(String(n));
document.getElementById("line").textContent = seen.join(" / ");
}
}, 300);
</script>
</body>
</html>

خط cold / hot / 3 است. cold همان لحظه بود. hot از timeout آمد. ۳ از interval آمد. کلمهٔ blank رفته. same / 4 / undefined / number مال صفحهٔ قبلی است.

پشت پیشخوان

  1. کتری را cold بگذار، hot را برای ۴۰۰ میلی‌ثانیه وقت بگذار، و همان لحظه لاگ بگیر. لاگ اول cold است. لاگ بعدی hot.
  2. hot را وقت بگذار، بعد پیش از اجرا clearTimeout بزن. لاگ cold می‌ماند.
  3. با setInterval بشمار و روی ۳ بایست. لاگ ۳ است.
  4. typeof شناسه را بخوان. لاگ number است.
  5. تأخیر را ۰ بگذار. لاگ‌ها now هستند، بعد later.
  6. خط صفحه را بخوان: cold / hot / 3.

اشتباه‌های پشت پیشخوان

کتری cold یا hot یا یک شمارش را نشان می‌دهد. خط زنگ را نشان نمی‌دهد.

  • انتظار اینکه لاگ اول hot باشد
  • نزدن clearTimeout، تا همان جوش باز hot بنویسد
  • ول کردن interval تا از ۳ بگذرد
  • ۴۰۰ را ۴۰۰ ثانیه حساب کردن
  • گرفتن تأخیر ۰ به‌جای «قبل از خط بعد»
  • خواندن خط به‌صورت same / 4 / undefined / number

این را نگه دار

  • خط بعدی پیش از تابع timeout اجرا می‌شود
  • clearTimeout آن تابع را برمی‌دارد و کتری cold می‌ماند
  • clearInterval شمارش را روی ۳ قطع می‌کند
  • شناسه‌ای که setTimeout می‌دهد عدد است
  • تأخیر ۰ هم اول now را لاگ می‌کند، بعد later
  • خط صفحه cold / hot / 3 است

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
7
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 56 از 58
Javascript آموزش