Debouncing

Avaa ChatGPT:ssä

25.11

Java API

Debouncing on tekniikka, joka viivyttää toiminnon suorittamista, kunnes määritetty aika on kulunut viimeisestä kutsusta. Jokainen uusi kutsu nollaa ajastimen. Tämä on hyödyllistä tilanteissa, kuten hakeminen kirjoittaessa, joissa haluat odottaa, kunnes käyttäjä lopettaa kirjoittamisen ennen haun suorittamista.

Näytä koodi

DebouncerView.java

Luo Debouncer viiveellä sekunneissa, ja kutsu sitten run() haluamallasi toiminnolla:

Debouncer debounce = new Debouncer(0.3f);

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

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

Miten se toimii

Kun kutsut run() toimintoa:

1. Jos ei ole odottavaa toimintoa, Debouncer aikatauluttaa toiminnon suoritettavaksi viiveen jälkeen
2. Jos toiminto on jo odottamassa, aikaisempi toiminto peruutetaan ja ajastin käynnistyy uudelleen uudella toiminnolla
3. Kun viive on kulunut ilman uutta kutsua, toiminto suoritetaan

Debouncer käyttää käyttöliittymän säiettä hyödyntäen webforJ:n Interval mekanismia, joten sinun ei tarvitse kääriä käyttöliittymän päivityksiä Environment.runLater()-kutsun ympärille.

Viiveen yksikö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 hallintaan Debouncerin käyttöön:

Odottavan toiminnon peruuttaminen

Käytä cancel() estääksesi odottavan toiminnon suorittamisen:

Debouncer debounce = new Debouncer(1f);

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

// Käyttäjä navigoi pois ennen kuin tallenus suoritetaan
debounce.cancel();

Odottavien viivästysten peruuttaminen

Kuten aikaväleissä, on hyvä käytäntö peruuttaa odottavat viivästyneet toiminnot, kun komponenttia tuhotaan. Tämä estää muistivuotoja ja virheitä, jotka johtuvat toimintojen suorittamisesta tuhoittuissa komponenteissa:

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

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

Välitön suorittaminen

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

Debouncer debounce = new Debouncer(0.5f);

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

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

Odottavan tilan tarkistaminen

Käytä isPending() tarkistaaksesi, onko toiminto odottamassa suorittamista:

Debouncer debounce = new Debouncer(0.3f);

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

Tapahtumatason viivästys vs Debouncer

webforJ tarjoaa kaksi lähestymistapaa viivästykseen:

Ominaisuus	Debouncer	ElementEventOptions.setDebounce()
Laajuus	Mikä tahansa toiminto	Vain elementtitapahtumat
Sijainti	Palvelinpuolella	Asiakaspuolella
Yksikkö	Sekunnit (float)	Millisekunnit (int)
Joustavuus	Täysi hallinta peruutuksen/flushin avulla	Automaattinen tapahtumalla

Käytä Debouncer-toimintoa, kun tarvitset ohjelmallista hallintaa viivästykseen, kuten odottavien toimintojen peruuttamista tai tyhjentämistä. Käytä ElementEventOptions-toimintoa, kun haluat yksinkertaista asiakaspuolen viivästystä elementtitapahtumille ilman lisäpalvelinkierroksia.

// Käyttäen ElementEventOptionsia asiakaspuolen viivästykseen
ElementEventOptions options = new ElementEventOptions();
options.setDebounce(300);

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