Javscript

JavaScript’te nasıl geri dönersiniz?

JavaScript’te kaynak yoğun görevlerle veya sunucu çağrılarıyla çalışırken, genellikle bu işlevlerin çalışma sıklığını azaltmaya ihtiyaç vardır. Bu nedenle, bu sorunları ele almak için bazı kalıpları bilmek harika.

İşlev çağrılarını geri döndürmek için aşağıdaki adımlarla clearTimeout/setTimeout işlevlerini kullanabilirsiniz:

  1. Önceden çalışan zamanlayıcıyı iptal edin.
  2. Yeni bir zamanlayıcı başlatın.
  3. Gecikmeli kodu zaman aşımında çalıştırın.

Aşağıdaki örneğimizde, kullanıcı 300 ms’den fazla yazmayı duraklattığında bir HTTP arama otomatik tamamlama isteği başlatacağız:

const search = document.createElement('input');
const suggestions = document.createElement('div');


let searchTimer;
search.addEventListener('input', () => {

  
  clearTimeout(searchTimer);

  
  searchTimer = setTimeout(() => {

    
    fetch(`/api/search?query="${encodeURIComponent(search.value.trim())}"`)
      .then((response) => response.json())
      .then((body) => {
        suggestions.textContent = body.join(', ');
      });

  }, 300);

});

search.type = 'search';
search.placeholder = 'Please enter your query...';
document.body.appendChild(search);
document.body.appendChild(suggestions);

Neden ayrılmamız gerekiyor?

Özellikle ön uç JavaScript uygulamalarında, genellikle kullanıcı yazma, fare hareketleri ve veya tarayıcı penceresini yeniden boyutlandırma gibi çeşitli kullanıcı girdilerinden gelen olaylar şeklinde birkaç giriş sinyali vardır.

Ağır hesaplamalar veya sunucu tarafına yapılan çağrılar gibi daha fazla zaman alan işlevlerin etkisiz hale getirilmesi gerekiyor. Bu, kullanıcının tarayıcısının yönetebileceğinden daha sık tetiklenmemelerini sağlamak ve aynı zamanda gereken sunucu çağrılarının sayısını azaltmak içindir.

Geri dönmenin bir başka nedeni de, kullanıcı arayüzü güncellemelerinin çok sık olabilmesidir. Bu, örneğin, kullanıcının yazarken olduğu gibi, değerin saniyede birkaç kez değiştiği, kullanıcının girdisine bağlı olarak sayfanın alanları gizleniyorsa, titreyen bir deneyim yaratabilir. Buna iyi bir örnek, her kullanıcı girişinde güncellenmesi gereken, ancak yine de “titreyen” bir izlenim veren doğrulama hatası araç ipuçları olabilir.

Geri dönme zaman aşımı ne kadar olmalıdır?

Geri dönme gecikmesinin ne kadar sürmesi gerektiğine dair kesin rakamlar koymak zor olsa da, kullanım durumuna bağlı olarak bazı temel kurallar burada verilmiştir.

Akışkan güncellemeleri için geri dönme zaman aşımı

Bununla çalışırken, akıcı ve pürüzsüz bir kullanıcı deneyimine ihtiyaç duyduğunda yaklaşık bir gecikme 30 milisaniye iyi bir dengedir. Saniyede 30 kare ile çalışan bir oyun hala oldukça düzgündür ve bize her kare için 33.33 milisaniye verir (1000 / 30 = 33.33).

30 milisaniyeden fazla olmayan bir gecikme genellikle neredeyse fark edilmez, ancak yine de pencere yeniden boyutlandırma veya kaydırma olayları gibi şeyleri büyük ölçüde bozar. Bu nedenle, bu geri dönme gecikmeleri, uygulamanız üzerinde çok fazla olumsuz etki yaratmadan kodunuza oldukça özgürce eklenebilir.

Klavye girişi veya pencere yeniden boyutlandırma için geri dönme zaman aşımı

Hem klavye girişi hem de pencere yeniden boyutlandırma olayları için bir gecikme 300 milisaniye iyi bir dengedir. Bu gecikme, kullanıcının kullanıcı arayüzünde bir miktar gecikme yaşadığını hissetmesi için görünür olacaktır.

Otomatik tamamlamayı yalnızca kullanıcı kısa bir süre yazmayı bıraktığında çalıştırmak istediğiniz, sunucu kaynaklarından tasarruf etmek için yukarıdaki gibi durumlarda, bu uzun gecikme genellikle iyidir ve daha kısa gecikmeler, kullanıcı çalışırken aramaları çok sık tetikler. hala aktif olarak yazıyor.

Önerileri sunmak için toplam sürenin toplam süre = geri dönme gecikmesi + sunucu gecikmesi + sunucu veritabanı aramasıbu nedenle burada uzun geri dönme gecikmesine eklemek, kullanıcı deneyimini kötüleştirecektir.

300 milisaniyelik gecikmeler için başka bir iyi kullanım durumu, kullanıcının tarayıcı penceresini yeniden boyutlandırmak için sürüklemesidir, bu da çok sayıda olayı tetikler ve genellikle düzen kaymaları nedeniyle tarayıcıda birçok yeniden akış işlemini tetikler. Uygulamanızda pencere boyutuyla ilgili çok sayıda hesaplama varsa, burada 300 milisaniyelik bir gecikme, pencere yeniden boyutlandırılırken uygulamanın kilitlenmesini önleyecektir. Ayrıca, kullanıcı bir sayfa yeniden boyutlandırmasında biraz gecikme ve yeniden çizim bekleyecektir, bu nedenle kullanıcı deneyimine çok fazla zarar vermez.

Bununla birlikte, pencere yeniden boyutlandırma için bu sorunları her zaman daha sorunsuz bir kullanıcı deneyimi üreteceğinden ve genellikle çok daha az kodla çözülebileceğinden, bu sorunları JavaScript yerine CSS ile çözmeye çalışmalısınız. CSS ızgaralı mizanpajların medya sorguları veya esnek kutu gibi özellikler bu durumlarda genellikle yardımcı olabilir. Bazen bu sorunlardan bazıları hala JavaScript gerektirecektir.

Yeniden kullanılabilir bir geri dönme işlevini nasıl oluşturabilirim?

Kod boyunca clearTimeout/setTimeout çiftleri eklemek bazen yeterince iyidir, ancak zamanlayıcı değişkenlerini takip etmek zorunda kalmamak da iyi olabilir.

Bu nedenle bir işlev kapsamı içinde tutulabilirler:

function debounce(callback, delay) {
  let timeout;
  return (...args) => {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => callback.apply(context, args), delay);
  };
}

Geri dönme işlevi kullanılarak ilk örnek daha kısa olarak yazılabilir:


const search = document.createElement('input');
const suggestions = document.createElement('div');

search.addEventListener('input', debounce(() => {

  fetch(`/api/search?query="${encodeURIComponent(search.value.trim())}"`)
    .then((response) => response.json())
    .then((body) => {
      suggestions.textContent = body.join(', ');
    });

}, 300));

search.type = 'search';
search.placeholder = 'Please enter your query...';
document.body.appendChild(search);
document.body.appendChild(suggestions);

Artık kodunuzu gecikmeli ama yine de daha performanslı tutabilirsiniz!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu