سلام. وقت بخیر
من کاربرد تابع settimeout را در این مثال که برای نمایش ساعت هست رو متوجه نمیشم. مگه این متد تابع داخلی رو بعد از یک تاخیر فقط یک بار اجرا نمیکنه؟؟ پس قانونا ساعت فقط یکبار باید نشون داده باشه و دیگه به روز نشه.!
مثال
سلام. وقت بخیر
من کاربرد تابع settimeout را در این مثال که برای نمایش ساعت هست رو متوجه نمیشم. مگه این متد تابع داخلی رو بعد از یک تاخیر فقط یک بار اجرا نمیکنه؟؟ پس قانونا ساعت فقط یکبار باید نشون داده باشه و دیگه به روز نشه.!
مثال
سلام و روز خوش
البته کد خوبی نیست،
ولی مشکلی هم نداره:
هر بار که تابع startTime اجرا میشه،
در پایانش تایمر رو ست میکنه که پس از 1000 میلی ثانیه دوباره خودش رو سدا بزنه.
<!DOCTYPE html>
<html>
<body onload="startTime()">
<h2>JavaScript Clock</h2>
<div id="txt"></div>
<script>
function startTime() {
const today = new Date();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>
سلام وقت بخیر
یعنی تابع setTimeout اگه تابعی که داخلش هست رو صدابزنه مثلsetInterval عمل میکنه؟
سلام دوباره
متدهای setInterval و setTimeout جایگزین هم نیستن،
و هر کدوم کاربرد مشخص و معین دارن:
- متد setInterval برای تکرار عملیات که در فواصل زمانی معین هست (دقیقا مثل اینجا که هر یک ثانیه است)
- متد setTimeot برای عملیاتی هست که باید فقط یک بار پس از یک تاخیر معین انجام بشه.
این که بجای setInterval بیایم setTimeout رو مثل نمونه w3schools به شکل برگشتی (recursive) بکار ببریم:
function loop() {
...
...
setTimeout(loop, delay);
}
باید دلیل خاصی داشته باشه - که اینجا اون شرایط نیست،
و این یکی از دلائلی هست که اشاره کردم کد خوبی نیست.
این حالت خاص که صحبتش شد زمانی هست که زمان انجام عملیات مورد نظر ما
مشخص و ثابت نیست (مثل درخواست از سرور برای دریافت دیتا)،
که فقط در این صورت هست که باید از الگوی recursive setTimeout استفاده کنیم،
وگرنه ممکن هست ترتیب اون ها به هم بریزه.
دلیل دیگه ای که این کد خوب نیست
برمیگرده به روش فرمت بندی ساعت که خیلی ابتدائی هست.
یک نمونه کد میگذارم که روش فرمت بندی ساعت و تاریخ رو نشون میده:
<div id="clock"></div>
<div id="calendarFA"></div>
<div id="calendarEN"></div>
const timeOptionsClock = {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
}
const timeOptionsCalendarFA = {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}
const timeOptionsCalendarEN = {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}
const clock = document.getElementById("clock")
const calendarFA = document.getElementById("calendarFA")
const calendarEN = document.getElementById("calendarEN")
setInterval(() => {
clock.innerText = new Date().toLocaleString("en", timeOptionsClock)
calendarFA.innerText = new Date().toLocaleString("fa", timeOptionsCalendarFA)
calendarEN.innerText = new Date().toLocaleString("en-US", timeOptionsCalendarEN)
}, 1000)
Display current date and time in Persian format