تابع setInterval and setTimeout

[ms_raha]

سلام
داخل تابع setInterval میشه از تابع settimeout استفاده کرد؟
من استفاده کردم ولی درست اجرا نمیشه
بکگراند 3 تا div را با تاخیر تغییر دادم با استفاده از تابع settimeout بعد خواستم که این تغییر تا اتمام برنامه اجرا بشه که از تابع setinterval استفاده کردم ولی درست اجرا نمیشه
ممنون میشم راهنماییم کنید

[MEHR4N]

بله میشه داخل هر کدوم از اون یکی هم استفاده کرد، احتمالا شما مشکل قبلی رو دارین، یعنی یکبار رنگ یکی رو تغییر دادین، مثلا آبی کردین، حالا دوباره تو کدتون میاد اونو آبی کنه، شما دیگه تغییری حس نمیکنین
البته این نوع استفاده شما از setTimout و setInterval درست نیست چون که دیگه با اینتروال زمان به تاخیر میفته نیاز نیست با setTimout هم زمانو تاخیر بدین مثلا به جای


setInteval( function(){
setTimeout( fn, 1000 );
}, 2000);

میتونین بذارین


setInterval( fn, 2000);

( البته این دو تا یه تفاوت ظریف دارن که مورد بحث نیست ولی مشخصه که شما رفتار دومی را میخواین)
بعد شما چون نمیخواین واسه تغییر رنگ افکت داشته باشین بهترین روش اینه که از ترکیب css و جاوااسریپت استفاده کنین مثلا اینجوری:


#div1{
background-color:red
}

#div1.blue{
background-color:blue



setInterval( function(){
$("#div1").toggleClass("blue");
}, 2000);

[ms_raha]

کدهای که من استفاده کردم به این صورت است

setInterval(function () {
setTimeout(function () {
$("#circle1").css("background-color", "white");
$("#circle2").css("background-color", "");
$("#circle3").css("background-color", "");
},4000);

setTimeout(function () {
$("#circle2").css("background-color", "white");
$("#circle1").css("background-color", "");
$("#circle3").css("background-color", "");
}, 4000);

setTimeout(function () {
$("#circle3").css("background-color", "white");
$("#circle1").css("background-color", "");
$("#circle2").css("background-color", "");
}, 4000);
),0};



اولین div رو سفید مکنه بعد بدون اینکه تاخیر ایجاد کنه دومی و بلافاصله سومی رو سفید میکنه ایراد این کد چیه که تاخیر ایجاد نمیکنه

[MEHR4N]

اول اینکه خط آخر کد باید اول آکولاد رو ببندی بعد پرانتز، من نمیدونم الان این کدتون چجوری داره اجرا میشه
دوم اینکه به اینتروال 0 بدی خیلی بده، cpu رو بدجور میگیره
بعد علت اینکه دومی و سومی تاخیر نداره ایه که شما 3 تا timout جدا زدی که بلافاصله بعد از 4 ثانیه اجرا شن، خوب هر 3 تا تابع بعد 4 ثانیه اجرا میشن، اگه بخوای هر کدوم با فاصله 4 ثانیه از اون یکی اجرا شن باید setTimout رو به صورت nested بنویسی، اون اینتروال رو هم 0 کردی، دیگه تاخیر معنی نداره، فرض کن در لحظه اول میگه در ثانیه چهارم این تابع رو بخونه، بعد دوباره همون لحظه یکی دیگه ایجاد میکنه یعنی توابع در این زمانا خونده میشن: 4000, 4001, 4002, ...
واسه اینکه اونجوری که میخوای کار کنه باید اونارو nested بنویسی و کل فرایند افکتت رو اتمیک در نظر بگیری و زمان اینتروال رو قرار بدی با مجموع کل طول تاخیر هر سه تابع که میشه 12000
بدینسان :D

setInterval(function () {
setTimeout(function () {
$("#circle1").css("background-color", "white");
$("#circle2").css("background-color", "");
$("#circle3").css("background-color", "");

setTimeout(function () {
$("#circle2").css("background-color", "white");
$("#circle1").css("background-color", "");
$("#circle3").css("background-color", "");

setTimeout(function () {
$("#circle3").css("background-color", "white");
$("#circle1").css("background-color", "");
$("#circle2").css("background-color", "");
}, 4000);
}, 4000);
},4000);
},12000);