سلام وقتتون بخیر
من میخوام یه تایمر طراحی کنم که سه تا دکمه داره Start, Stop, Reset
الان من چهار تا استیت تعریف کردم برای ساعت دقیقه ثانیه و اینکه آیا Timer شروع به حرکت کرده یا نه
الان من میخوام مقدار استیت ها رو تغییر بدم تغییر نمی کنه
import React, { useState } from 'react';
let interval;
const Timer = () => {
const [hour, setHour] = useState(0);
const [minute, setMinute] = useState(0);
const [second, setSecond] = useState(0);
const [isStart, setIsStart] = useState(false);
const startTimer = () => {
if (isStart === false) {
setIsStart(true);
interval = setInterval(() => {
setSecond(second + 1)
if(second === 60) {
setSecond(0);
setMinute(minute + 1);
};
if(minute === 60) {
setMinute(0);
setHour(hour + 1);
};
console.log(`${hour} : ${minute} : ${second}`, isStart);
}, 100);
};
};
const stopTimer = () => {};
const resetTimer = () => {};
return(
<>
<h4 className="bg-slate-800 rounded-lg px-4 py-3 font-semibold text-base sm:text-lg text-center text-white animate-pulse cursor-pointer">
{`${hour} : ${minute} : ${second}`}
</h4>
<div className="mt-5">
<button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Start" onClick={startTimer}>Start</button>
<button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Stop" onClick={stopTimer}>Stop</button>
<button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Reset" onClick={resetTimer}>Reset</button>
</div>
</>
);
};
export default Timer;
یه لاگ گرفتم داخل interval میخواستم ببینم تغییر می کنه یا نه که نتیجش اینه
ممنون میشم راهنماییم کنید
سلام محمد جان،
تنها میتونم چند تا پیشنهاد کوچیک بهت بدم و نکاتی رو بهت یادآوری کنم:
بیا و ساختار کلی رو تغییر بده.
یه استیت کلی بزار برای تمام ثانیه ها و توی interval هر ثانیه تنها ۱ بار یک ثانیه به مقدارش اضافه کن.
const [interval,setIntervalId] = useState(null);
const [seconds,setSeconds] = useState(0);
const start = () => {
interval && clearInterval(interval); // اگه از قبل تایمری وجود داره، حذفش کن
const newInterval = setInterval(()=>{
setSeconds(seconds+1);
},1000);
setInterval(newInterval);
};
و در xml اطلاعات مورد نیاز رو اینطوری نمایش بده.
<p>
{Math.floor(seconds/60)}:{seconds%60}
</p>
اگه سوال دیگه ای داری میتونی با کمال میل بپرسی، در غیر این صورت میتونی بحث و گفت و گو رو ببندی 😉
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟