സൗജന്യ പോമോഡോറോ ടൈമർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഈ Pomodoro ടൈമർ ബാഹ്യ ലൈബ്രറികളൊന്നും ഇല്ലാതെ പൂർണ്ണമായും ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു. ബാക്ക്ഗ്രൗണ്ട്-ടാബ് ത്രോട്ട്ലിംഗ് ടൈമറിനെ മന്ദഗതിയിലാക്കാതിരിക്കാൻ Date.now() ഉപയോഗിച്ച് കൗണ്ട്ഡൗൺ ഒരു വാൾ-ക്ലോക്ക് ടൈംസ്റ്റാമ്പിലേക്ക് ആങ്കർ ചെയ്യുന്നു, എല്ലാ അറിയിപ്പ് ശബ്ദങ്ങളും Web Audio API വഴി ആവശ്യാനുസരണം സിന്തസൈസ് ചെയ്യുന്നു — ഓഡിയോ ഫയലുകളൊന്നും ഡൗൺലോഡ് ചെയ്യുന്നില്ല.

1. 1
   വാൾ-ക്ലോക്ക് കൗണ്ട്ഡൗൺ എഞ്ചിൻ

   നിങ്ങൾ Start അമർത്തുമ്പോൾ, ടൈമർ ഒരു ആബ്സൊല്യൂട്ട് അന്ത്യ ടൈംസ്റ്റാമ്പ് (Date.now() പ്ലസ് ബാക്കിയുള്ള സെക്കൻഡുകൾ) രേഖപ്പെടുത്തുന്നു. ഓരോ 500 ms-ലും, setInterval ആ ഫിക്സഡ് എൻഡ്പോയിന്റിൽ നിന്ന് നിലവിലെ സമയം കുറച്ച് എത്ര സെക്കൻഡുകൾ ബാക്കിയുണ്ടെന്ന് വീണ്ടും കണക്കാക്കുന്നു. ബ്രൗസർ ടാബ് ത്രോട്ടിൽ ചെയ്താൽ, അടുത്ത ടിക്ക് വരുന്ന നിമിഷം ഗണിതം സ്വയം ശരിയാക്കുന്നു.
2. 2
   ടാബ്-ഫോക്കസ് വീണ്ടും-സിൻക്

   നിങ്ങൾ ടാബിലേക്ക് തിരികെ മാറുന്ന നിമിഷം ഒരു visibilitychange ഇവന്റ് ലിസണർ അതേ സിൻക് ഫംഗ്ഷൻ ട്രിഗർ ചെയ്യുന്നു. ഇതിനർത്ഥം അടുത്ത 500 ms ടിക്കിനായി കാത്തിരിക്കാതെ ഡിസ്പ്ലേ ഉടനടി ശരിയായ ബാക്കി സമയത്തിലേക്ക് ചാടുന്നു എന്നാണ് — ടാബ് വളരെ നേരം ബാക്ക്ഗ്രൗണ്ടിലായിരുന്നപ്പോൾ ഇത് പ്രധാനമാണ്.
3. 3
   Web Audio API സൗണ്ട് സിന്തസിസ്

   മൂന്ന് അലേർട്ട് ശബ്ദങ്ങളും (classic, chime, digital) ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ AudioContext ഉപയോഗിച്ച് പൂർണ്ണമായും ജനറേറ്റ് ചെയ്യുന്നു — ഒരു OscillatorNode ഫ്രീക്വൻസിയും വേവ്ഫോം ടൈപ്പും (sine അല്ലെങ്കിൽ square) സെറ്റ് ചെയ്യുന്നു, ഒരു GainNode എൻവലപ്പ് രൂപപ്പെടുത്താൻ ഒരു എക്സ്പോണൻഷ്യൽ വോളിയം റാമ്പ് പ്രയോഗിക്കുന്നു. ഓഡിയോ ഫയലുകളൊന്നും ഫെച്ച് ചെയ്യുകയോ ഡീകോഡ് ചെയ്യുകയോ ചെയ്യുന്നില്ല.
4. 4
   ക്രമീകരണങ്ങളും ദൈനംദിന കൗണ്ട് പെർസിസ്റ്റൻസും

   നിങ്ങളുടെ ഇഷ്ട ദൈർഘ്യങ്ങളും ഇന്നത്തെ പൂർത്തിയായ-പോമോഡോറോ കൗണ്ടും രണ്ട് പ്രത്യേക കീകൾക്ക് കീഴിൽ localStorage-ലേക്ക് എഴുതുന്നു. പേജ് ലോഡിൽ ടൂൾ അവ തിരികെ വായിക്കുന്നു, അനുവദനീയമായ റേഞ്ചുകൾക്കെതിരെ ഓരോ മൂല്യവും സാധൂകരിക്കുന്നു, ടൈമർ റീഹൈഡ്രേറ്റ് ചെയ്യുന്നു — അതിനാൽ ഒരു സെർവർ റൗണ്ട്-ട്രിപ്പില്ലാതെ പേജ് റിഫ്രഷിനെ നിങ്ങളുടെ ക്രമീകരണങ്ങൾ അതിജീവിക്കുന്നു.

അനുബന്ധ ടൂളുകൾ