အခမဲ့ Pomodoro အချိန်ပိုင်းစက်

မည်သို့ အလုပ်လုပ်သည်

ဤ Pomodoro timer သည် ပြင်ပ library လုံးဝမရှိဘဲ browser ထဲတွင် လုံးဝ လုပ်ဆောင်ပါသည်။ Countdown ကို Date.now() ကို သုံး၍ wall-clock timestamp တစ်ခုနှင့် ချိတ်ဆက်ထားသဖြင့် background-tab throttling က timer ကို နှေးကွေးမစေနိုင်ပါ၊ notification အသံများအားလုံးကို Web Audio API မှတစ်ဆင့် အလိုအလျောက် ဖန်တီးထားသည် — audio ဖိုင် မည်သည့်တစ်ခုမျှ ဒေါင်းလုဒ်မချပါ။

1. 1
   နာရီအချိန်အတိုင်း နောက်ပြန်ရေတွက်စနစ်

   Start ကို နှိပ်လိုက်သောအခါ timer သည် absolute end timestamp (Date.now() ပေါင်း ကျန်ရှိသော စက္ကန့်) ကို မှတ်တမ်းတင်သည်။ 500 ms တိုင်း setInterval သည် လက်ရှိအချိန်ကို ထို ကိန်းသေ endpoint မှ နုတ်ခြင်းဖြင့် ကျန်ရှိသော စက္ကန့်ကို ပြန်တွက်ချက်သည်။ Browser သည် tab ကို throttle လုပ်ပါက ဂဏန်းသင်္ချာသည် နောက်ထပ် tick ငြင်းသည်နှင့် ကိုယ်တိုင် ပြင်ဆင်သည်။
2. 2
   Tab-focus ပြန် sync ခြင်း

   visibilitychange event listener တစ်ခုသည် သင် tab သို့ ပြန်ပြောင်းလိုက်သည်နှင့် sync function တူတူကို ချက်ချင်း ငြင်းသွားစေသည်။ ဆိုလိုသည်မှာ tab သည် ကြာရှည်စွာ background တွင်ရှိနေသည့်တိုင် ပြသမှုသည် နောက်ထပ် 500 ms tick ကို မစောင့်ဆိုင်းဘဲ မှန်ကန်သော ကျန်ရှိသောအချိန်သို့ ချက်ချင်း ပြောင်းသည်။
3. 3
   Web Audio API အသံ ဖန်တီးမှု

   Alert အသံသုံးမျိုး (classic, chime, digital) ကို browser ၏ built-in AudioContext ကသာ ဖန်တီးသည် — OscillatorNode တစ်ခုသည် frequency နှင့် waveform အမျိုးအစား (sine or square) ကို သတ်မှတ်ပြီး GainNode တစ်ခုသည် envelope ပုံဖော်ရန် exponential volume ramp ကို အသုံးချသည်။ Audio ဖိုင်များ fetch သို့မဟုတ် decode မလုပ်ပါ။
4. 4
   Setting များနှင့် နေ့စဉ် count ဆက်လက်တည်ရှိမှု

   သင့် custom durations နှင့် ယနေ့ ပြီးစီးသော pomodoro count ကို localStorage key နှစ်ခုအောက်တွင် ရေးထားသည်။ Page load တွင် ကိရိယာသည် ၎င်းတို့ကို ပြန်ဖတ်ယူပြီး တန်ဖိုးတိုင်းကို ခွင့်ပြုထားသော range များနှင့် စစ်ဆေးကာ timer ကို ပြန်ဖွင့်ပေးသည် — ထို့ကြောင့် သင့် setting များသည် server round-trip မလိုဘဲ page refresh ကို ခံနိုင်ရည်ရှိသည်။

ဆက်နွှယ်သော ကိရိယာများ