Bu kronometre aslında nasıl zaman ölçer?

Başlangıç anında `performance.now()`'ı bir kez okur ve bu sayıyı saklar. Bundan sonra ekrandaki değer sadece "zaten banko edilmiş zaman" artı "şu anki `performance.now()` eksi o kaydedilmiş başlangıç zaman damgası" olur — her 30ms yeniden çizimde yeniden hesaplanır. Bu, her tetikleme için çalışan toplama değerine sabit +30ms eklemekten kurtulur, bu da birçok kendi yapımı zamanlayıcının yavaşça senkronizasyon kaybetmesine neden olan kısayoldur.

Kronometre çalışırken başka bir tarayıcı sekmesine geçersem ne olur?

Arka planda çalışan sekme yavaşlatılır — tarayıcı 30ms `setInterval`'ı CPU ve pil tasarrufu için saniyede bir veya daha yavaş hale getirebilir, bu nedenle ekrandaki sayı sizin uzakta olduğunuz sürece donabilir veya sıçrayabilir. Ancak bu kronometre, geçen süreyi her zaman zaman damgası farkı olarak hesaplar, tetikleme sayısını saymak yerine, bu nedenle sekmeye geri döndüğünüzde, bir sonraki yeniden çizim tam olarak doğru geçen süreyi gösterir. Yavaşlama, sadece ekrandaki görsel akışın düzgün olmamasına neden olur, çünkü sizin dikkatiniz dışında bir şey yaparken zaman kaybetmez veya kazanmaz.

Neden `performance.now()` kullanılıyor, `Date.now()` yerine — gerçekten önemli mi?

Evet. `Date.now()` sisteminizdeki duvar saati (wall clock) zamanını yansıtır ve bu duvar saatleri ileri veya geri atlayabilir — örneğin bir laptop uyku durumundan uyanıp NTP sunucusuyla senkronize olur veya sistem saati el ile değiştirilirse. `performance.now()` ise sadece sabit bir hızda artan monotonik bir saat ve bu düzeltmelere maruz kalmaz. Bu da bir kronometreye gerekli olan özelliği sağlar ve bu yapı `performance.now()` kullanır.

Geçen süreyi veya lap geçmişini herhangi bir yerde kaydeder mi?

Hayır — ve diğer Toolio araçlarından farklı olarak, bu veri için tarayıcının `localStorage`'ını hiç kullanmaz. Gördüğünüz her şey sadece bu sekmenin açık olduğu sürece sayfa hafızasında yer alır. Sayfayı yenileyin, sekme kapatın veya başka bir araçta çalışın, geçen süreniz ve her lap kaybolur; geri alma veya otomatik kaydetme yoktur, çünkü hiçbir şey ilk olarak depolamaya yazmaz. Eğer bir kayıt ihtiyacınız varsa, ayrılmadan önce sayıları kopyalayın veya ekran görüntüsü alın.

Lap'lar için bir sınır var mı ve her lap satırında iki sayı ne anlama gelir?

Hiçbir sınır yok — liste sadece uzar ve en yeni lap en üstte sabitlenir. Her satırda iki sayı gösterilir: vurgulanan renkteki split, yani önceki lap'tan beri geçen süre; ve gri renkteki toplam, yani başlangıçtan beri toplam süre. Bu ikili, bir bireysel segmenti — bir egzersiz aralığı, bir konuşma bölümü — değerlendirmenize olanak tanır, ancak genel süreyi kaybetmeden.

Bu araç, verilerimi yükler mi?

Hayır. Her şey tarayıcınızda çalışır, bu yüzden verileriniz cihazınızdan asla çıkmaz — sayfa yüklendikten sonra bile çevrimdışı çalışır.

⏱️ Çevrimiçi Kronometre

Başlat'ı basarsanız, araç zamanın küçük parçalarını 30 milisaniye aralıklarla eklemiyor. Başlangıç anında anlık olarak performance.now() okumasını kaydeder ve her yeniden çizimde bu kaydedilen sayıyı şu anki sayıyla çıkararak geçen süreyi hesaplar — bu değer her seferinde yeniden hesaplanır, birikimli değil. Bu ayrım önemlidir çünkü tarayıcılar arka planda sekmesini yavaşlatmak suretiyle pil tasarrufu sağlar ve bu da kendi yapımı zamanlayıcıların saniyeler kaybetmesine veya kaymamasına neden olur. Bu kronometre, zamanı saymak yerine zaman damgası farkından türettiği için, sekmeden ayrıldığınızda bile, tarayıcı ekran güncellemelerini yavaşlatsa bile, geri döndüğünüz an anlık olarak doğru değeri gösterir.

Kronometre, tarayıcıda ekran güncellemelerini saymak yerine, performance.now() olarak adlandırılan monotonik saat ile kaydedilmiş başlangıç zaman damgasını karşılaştırarak geçen süreyi ölçen ücretsiz bir tarayıcı lap (aralıksız) zamanlayıcıdır. Bu nedenle tarayıcı sekmesini yavaşlatsa bile gösterilen sayı daima doğru kalır.

00:00.00

Tasarım gereği gizli. Bu araç, tarayıcınızda tamamen çalışır — girdiğiniz hiçbir şey yüklenmez ya da saklanmaz ve çevrimdışı da çalışır.

Hakkında

İçindekilerde üç adet durum vardır: birikmiş `elapsed` (geçen süre) değeri milisaniye cinsinden, `startAt` olarak adlandırılan `performance.now()`'ın başlangıç anındaki bir kopyası ve `running` olarak adlandırılan bir boolean (doğru/yanlış) durumu. Ekran üzerindeki sayıyı üreten fonksiyon, `running` ise şu anki an ile `startAt` arasındaki farkı ekleyerek `elapsed` ile toplamaktır. `setInterval` bu fonksiyonu sadece 30 milisaniye aralıklarla çağırır, çünkü sadece ekranın yeniden çizilmesi için bir tetikleyici görevi görür. Bu aralıkların kendileri zaman bilgisi taşımaz. Bu, bir kronometre oluşturmanın doğru yolu ve bu yöntem, zamanlayıcı her bir tetikleme ile sabit bir artış eklerse, tetiklemeler gecikir, atlanır veya birleştirilirse zamanlayıcının yavaşça kaymasına neden olan yaygın hatayı doğrudan önler.

Bu tasarım seçimi, başka bir sekmeye geçtiğinizde de aynı şekilde çalışır. Tarayıcılar arka planda çalışan zamanlayıcıları CPU ve pil tasarrufu için yavaşlatır. 30ms aralıklarla ayarlanmış bir `setInterval`, sekme görünürken 1 saniyede bir veya daha yavaş olabilir. Bu kronometrede bu durum sadece ekran üzerindeki sayının ne sıklıkta yeniden çizilmesini etkiler; arka planda çalışan matematik (şu anki zaman damgası eksi başlangıç zaman damgası, artı daha önce banko edilmiş süre) kaç tane yeniden çizim atlandıysa onu umursamaz. Sekmeye geri döndüğünüzde, bir sonraki yeniden çizim tam olarak doğru geçen süreyi gösterir. Bu yavaşlama, sadece ekranın ne kadar düzgün şekilde güncellendiğini etkiler, çünkü sadece başka bir şey üzerinde odaklanırken saniyelerin nasıl geçtiğini izlemek için bir şey kaybedilmez veya kazanılmaz.

`performance.now()` kullanmak `Date.now()` yerine bu iş için doğru temel bir yapıdır, bu da tesadüfen değil. `Date.now()` sisteminizdeki duvar saati (wall clock) zamanını yansıtır ve bu duvar saatleri atlayabilir — bir laptop uyku durumundan uyanıp NTP sunucusuyla senkronize olursa, el ile saat değişikliği yapılırsa veya yaz saati ayarı yapıldığında `Date.now()` orta bir oturumda ileri veya geri atlayabilir. `performance.now()` ise monotonik bir saat olarak tanımlanır: sadece sabit bir hızda artar ve bu düzeltmelere maruz kalmaz. Bu da bir kronometreye gerekli olan garantiyi sağlar ve duvar saati zamanlayıcılar bu garantiyi sağlamaz.

Açıkça bir sınırlama var ve bu da süreklilik. Bu yapı, `elapsed` ve `laps` dizisini sadece sayfa hafızasında normal JavaScript değişkenleri olarak tutar. Kaynakta `localStorage` veya bu sitenin kendi `Playground.store()` yardımcı fonksiyonu çağrılmaz. Diğer Toolio araçları bunu kullanır. Bu nedenle sayfayı yenileyin, sekme kapatın veya başka bir araçta çalışın, çalışan süreniz ve kaydedilmiş her lap anında ve kalıcı olarak silinir. "Önceki oturumu devam ettir" gibi bir şey yoktur, cihazlar arasında senkronizasyon yoktur ve hiçbir şeyi yedeklemek yoktur, çünkü hiçbir şey ilk olarak depolamaya yazmaz. Eğer bir lap geçmişi gerçekten sizin için önemliyse — bir egzersiz günlüğü, bir sunum zamanlaması gibi — sayfadan ayrılmadan önce sayıları kopyalayın veya ekran görüntüsü alın, çünkü bu sayfa onları sizin için unutmayacaktır.

Nasıl kullanılır

"Başlat" butonuna tıklayın — buton hemen "Durdur" olarak yeniden etiketlenir ve ekrandaki saat gerçek zamanla artmaya başlar ve her 30 milisaniyede bir yeniden çizilir.
Kronometre çalışırken herhangi bir an "Lap" butonuna tıklayarak geçerli geçen süreyi bir kare olarak kaydedebilirsiniz; yeni girdi lap listesinin en üstüne sabitlenir ve önceki lap'tan beri geçen süreyi (split) ve toplam süreyi (cumulative total) gösterir.
Aynı butona tekrar tıklayın, artık "Durdur" olarak etiketlenmiş, ekrandaki saat donar — geçen süre içerde korunur, hiçbir şey kaybolmaz ve buton "Başlat" olarak geri döner.
"Başlat" butonuna tekrar tıklayarak, tam olarak nereden kaldığınızdan devam edin, sıfırdan değil.
"Sıfırla" butonuna tıklayarak ekrandaki sayıyı sıfırlayın, kaydedilmiş her lap'ı temizleyin ve butonlara başlangıç etiketlerini geri döndürün — bu, yeni bir oturum başlatmanın tek yolu da budur, çünkü eski oturumu korumak için bir kaydetme özelliği yoktur.

SSS

Bu kronometre aslında nasıl zaman ölçer?: Başlangıç anında `performance.now()`'ı bir kez okur ve bu sayıyı saklar. Bundan sonra ekrandaki değer sadece "zaten banko edilmiş zaman" artı "şu anki `performance.now()` eksi o kaydedilmiş başlangıç zaman damgası" olur — her 30ms yeniden çizimde yeniden hesaplanır. Bu, her tetikleme için çalışan toplama değerine sabit +30ms eklemekten kurtulur, bu da birçok kendi yapımı zamanlayıcının yavaşça senkronizasyon kaybetmesine neden olan kısayoldur.
Kronometre çalışırken başka bir tarayıcı sekmesine geçersem ne olur?: Arka planda çalışan sekme yavaşlatılır — tarayıcı 30ms `setInterval`'ı CPU ve pil tasarrufu için saniyede bir veya daha yavaş hale getirebilir, bu nedenle ekrandaki sayı sizin uzakta olduğunuz sürece donabilir veya sıçrayabilir. Ancak bu kronometre, geçen süreyi her zaman zaman damgası farkı olarak hesaplar, tetikleme sayısını saymak yerine, bu nedenle sekmeye geri döndüğünüzde, bir sonraki yeniden çizim tam olarak doğru geçen süreyi gösterir. Yavaşlama, sadece ekrandaki görsel akışın düzgün olmamasına neden olur, çünkü sizin dikkatiniz dışında bir şey yaparken zaman kaybetmez veya kazanmaz.
Neden `performance.now()` kullanılıyor, `Date.now()` yerine — gerçekten önemli mi?: Evet. `Date.now()` sisteminizdeki duvar saati (wall clock) zamanını yansıtır ve bu duvar saatleri ileri veya geri atlayabilir — örneğin bir laptop uyku durumundan uyanıp NTP sunucusuyla senkronize olur veya sistem saati el ile değiştirilirse. `performance.now()` ise sadece sabit bir hızda artan monotonik bir saat ve bu düzeltmelere maruz kalmaz. Bu da bir kronometreye gerekli olan özelliği sağlar ve bu yapı `performance.now()` kullanır.
Geçen süreyi veya lap geçmişini herhangi bir yerde kaydeder mi?: Hayır — ve diğer Toolio araçlarından farklı olarak, bu veri için tarayıcının `localStorage`'ını hiç kullanmaz. Gördüğünüz her şey sadece bu sekmenin açık olduğu sürece sayfa hafızasında yer alır. Sayfayı yenileyin, sekme kapatın veya başka bir araçta çalışın, geçen süreniz ve her lap kaybolur; geri alma veya otomatik kaydetme yoktur, çünkü hiçbir şey ilk olarak depolamaya yazmaz. Eğer bir kayıt ihtiyacınız varsa, ayrılmadan önce sayıları kopyalayın veya ekran görüntüsü alın.
Lap'lar için bir sınır var mı ve her lap satırında iki sayı ne anlama gelir?: Hiçbir sınır yok — liste sadece uzar ve en yeni lap en üstte sabitlenir. Her satırda iki sayı gösterilir: vurgulanan renkteki split, yani önceki lap'tan beri geçen süre; ve gri renkteki toplam, yani başlangıçtan beri toplam süre. Bu ikili, bir bireysel segmenti — bir egzersiz aralığı, bir konuşma bölümü — değerlendirmenize olanak tanır, ancak genel süreyi kaybetmeden.
Bu araç, verilerimi yükler mi?: Hayır. Her şey tarayıcınızda çalışır, bu yüzden verileriniz cihazınızdan asla çıkmaz — sayfa yüklendikten sonra bile çevrimdışı çalışır.