Debouncing

Avaa ChatGPT:ssä

25.11

Java API

Debounceaminen on tekniikka, joka viivästyttää toiminnan suorittamista, kunnes tietty aika on kulunut viimeisestä kutsusta. Jokainen uusi kutsu nollaa ajastimen. Tämä on hyödyllistä skenaarioissa, kuten kirjoittaessasi hakua, jossa haluat odottaa, että käyttäjä lopettaa kirjoittamisen ennen hakukyselyn suorittamista.

Näytä koodi

DebouncerView.java

Peruskäyttö

Debouncer-luokka tarjoaa yksinkertaisen tavan debounce-toimintoja. Luo Debouncer, jolla on viive sekunteina, ja kutsu sitten run() haluamasi debounce-toiminnon kanssa:

Debouncer debounce = new Debouncer(0.3f);

textField.onModify(e -> {
  debounce.run(() -> search(textField.getText()));
});

Tässä esimerkissä search()-metodia kutsutaan vain sen jälkeen, kun käyttäjä on lopettanut kirjoittamisen 300 millisekunnin ajan. Jokainen näppäinpainallus nollaa ajastimen onModify-tapahtuman kautta, joten nopea kirjoittaminen ei käynnistä useita hakuja.

Kuinka se toimii

Kun kutsut run() toiminnoilla:

1. Jos ei ole odottavaa toimintoa, Debouncer aikatauluttaa toiminnan suoritettavaksi viiveen jälkeen
2. Jos toiminto on jo odottavana, edellinen toiminto peruutetaan ja ajastin käynnistyy uudelleen uuden toiminnon kanssa
3. Kun viive on kulunut ilman uutta kutsua, toiminto suoritetaan

Debouncer toimii käyttöliittymän säikeessä käyttäen webforJ:n Interval mekanismia, joten sinun ei tarvitse kääriä käyttöliittymän päivityksiä Environment.runLater()-muotoon.

Viiveyksiköt

Viiveparametri käyttää sekunteja yksikkönä, ei millisekunteja. Käytä 0.3f 300 ms:lle tai 1.5f 1,5 sekunnille.

Suorittamisen hallinta

Seuraavia metodeja voidaan käyttää tarkempaan suorituksen käsittelyyn ja Debouncerin käyttöön:

Odottavan toiminnan peruuttaminen

Käytä cancel() pysäyttääksesi odottavan toiminnan suorittamisen:

Debouncer debounce = new Debouncer(1f);

debounce.run(() -> saveDocument());

// Käyttäjä siirtyy pois ennen tallennuksen suorittamista
debounce.cancel();

Odottavien debouncejen peruuttaminen

Kuten aikaväleissä, on hyvä käytäntö peruuttaa odottavat debounce-toiminnat, kun komponentti tuhotaan. Tämä estää muistivuodot ja virheet tuhoutuneilla komponenteilla suoritettavissa toiminnoissa:

public class SearchPanel extends Composite<Div> {
  private final Debouncer debounce = new Debouncer(0.3f);

  @Override
  protected void onDidDestroy() {
    debounce.cancel();
  }
}

Pakotettu välitön suorittaminen

Käytä flush() suorittaaksesi odottavan toiminnan heti:

Debouncer debounce = new Debouncer(0.5f);

textField.onModify(e -> {
  debounce.run(() -> validateInput(textField.getText()));
});

// Pakota validointi ennen lomakkeen lähettämistä
submitButton.onClick(e -> {
  debounce.flush();
  if (isValid()) {
    submitForm();
  }
});

Odottavan tilan tarkistaminen

Käytä isPending() varmistaaksesi, onko toiminta odottamassa suoritusta:

Debouncer debounce = new Debouncer(0.3f);

if (debounce.isPending()) {
  statusLabel.setText("Käsitellään...");
}

Tapahtumatason debounce vs Debouncer

webforJ tarjoaa kaksi lähestymistapaa debounceamiseen:

Ominaisuus	Debouncer	ElementEventOptions.setDebounce()
Laajuus	Mikä tahansa toiminto	Elementtien tapahtumat vain
Sijainti	Palvelinpuoleinen	Asiakaspuoleinen
Yksikkö	Sekunnit (float)	Millisekunnit (int)
Joustavuus	Täydellinen hallinta peruutus/pakota	Automaattinen tapahtuman kanssa

Käytä Debouncer-luokkaa, kun tarvitset ohjelmallista hallintaa debounceamisessa, kuten odottavien toimintojen peruuttamista tai pakottamista. Käytä ElementEventOptions-luokkaa, kun haluat yksinkertaista asiakaspuoleista debounceamista elementtien tapahtumille ilman ylimääräisiä palvelinkierroksia.

// Käyttämällä ElementEventOptions-objektia asiakaspuoleisessa debounceamisessa
ElementEventOptions options = new ElementEventOptions();
options.setDebounce(300);

element.addEventListener("input", e -> {
  // Tämä käsittelijä on debounce asiakaspuolella
}, options);