İçeriğe geç

Basış sırasında bekleyen alan doğrulaması

Web / frontend · Zorluk 4/5 · TypeScript · 50 satırKöken: Gerçek proje (anonim)

Görev

Yapay zekâdan istenen

Formda bir alan odağı kaybedince (focusout) yeniden doğrulanır ve hata mesajı güncellenir. Hata mesajının kalkması altındaki düğmeleri yukarı kaydırır; kullanıcı o sırada fareyle bir düğmeye basıyorsa tıklama boşa gider. Bu yüzden fare tuşu basılıyken odağını kaybeden alanların doğrulamasını beklet ve basış bitince çalıştır. Basış click ya da pointercancel ile biter. Kullanıcı tuş basılıyken sekme ya da pencere değiştirirse (pageLeft) basış bu sayfada bitmez; o zaman da bitmiş say. Aynı anda tek basış olur. Basış yokken doğrulama beklemeden çalışır; bir alan bir basış boyunca birden çok kez odak kaybederse bir kez doğrulanır.

Teslim notu

Yapay zekâ kodu teslim ederken şunu yazdı:

“Basış sırasında bekleyen doğrulamalar click ve pointercancel'da çalışıyor. Sayfadan çıkılınca da hemen çalışıyor, kullanıcı döndüğünde hatalar güncel oluyor.”

Yapay zekânın yazdığı kod

TypeScript50 satır

Hatalı bulduğun satırları işaretle; her işarete önem seç ve nedenini bir cümleyle yaz.

Satıra tıkla ya da dokun. Klavyede satıra gidip Enter'a bas.

0/5 işaret
Önem nasıl seçilir
  • KritikVeri kaybı, güvenlik açığı ya da para kaybı
  • ÖnemliGörevin istediği bir durumda kullanıcı yanlış sonuç alır
  • KüçükGörevin dışında kalan nadir bir uç durum ya da okunurluk

Test konusunda önem, testin yakalamadığı hatalı uygulamanın etkisine göre belirlenir.

Gerekçe puanlanmaz; sonuçta örnek cevapla karşılaştırırsın.

export interface PressAwareValidation {
  /** pointerdown anywhere on the page */
  pointerDown(): void;
  /** click anywhere on the page */
  click(): void;
  /** pointercancel anywhere on the page */
  pointerCancel(): void;
  /** the page was hidden or the window lost focus */
  pageLeft(): void;
  /** focusout on a form field */
  focusOut(field: string): void;
}
13
export function createPressAwareValidation(
  validate: (field: string) => void,
): PressAwareValidation {
  const held: string[] = [];
  let pressed = false;
19
  function runHeld(): void {
    for (const field of held.splice(0)) {
      validate(field);
    }
  }
25
  function endPress(): void {
    pressed = false;
    runHeld();
  }
30
  return {
    pointerDown() {
      pressed = true;
    },
    click: endPress,
    pointerCancel: endPress,
    pageLeft() {
      // Run the held checks now, so the errors are up to date when the
      // user comes back.
      runHeld();
    },
    focusOut(field) {
      if (!pressed) {
        validate(field);
      } else if (!held.includes(field)) {
        held.push(field);
      }
    },
  };
}

Kanıtlayan test

Doğru seçenek, bu kodda başarısız olan, yani hatayı ortaya çıkaran testtir.

Test seçenekleri
Göndermek için en az bir satır işaretle.

Gönderince sayaca yedi bilgi gider; gerekçe metnin cihazında kalır. Veriler