Cum configurez un cronometru pentru a preveni suprapunerea apelurilor ajax?

Am o pagină în care rezumatele căutării sunt afișate atât într-o grilă, cât și pe o hartă (folosind KML generat în zbor, suprapus pe o hartă Google încorporată). Am conectat acest lucru la lucru ca tip de utilizator; aici este scheletul codului meu, care funcționează:

$(function() {
   //Wire up search textbox
    $('input.Search').bind("keyup", update);
});

update = function(e) {
   //Get text from search box
   //Pass to web method and bind to concessions grid
    $.ajax({  
        ...
        success: function(msg) {
            displayResults(msg, filterParams);
        },
    });

}

displayResults = function(msg, filterParams) {
       //Databind results grid using jTemplates
       //Show results on map: Pass parameters to KML generator and overlay on map
}

În funcție de căutare, pot exista sute de rezultate; astfel încât lucrul care se întâmplă în displayResults este intensiv pe server atât pe server (interogarea bazei de date, construirea și simplificarea KML-ului), cât și pe client (bazându-se pe grila de rezultate, fișiere de pe hartă).

Îmi place imediarea obținerii unor rezultate progresive mai restrânse pe măsură ce tip, dar aș dori să minimalizez numărul de ori care se refacă. Care este cel mai simplu mod de a introduce o întârziere de două secunde după ce utilizatorul nu mai scrie, înainte de a executa funcția update ?

1

3 răspunsuri

În loc să sunați direct update() , apelați un pachet care verifică dacă există actualizări întârziate în așteptare:

$('input.Search').bind("keyup", delayedUpdate);

function delayedUpdate() {
    if (updatePending) {
        clearTimeout(updatePending);
    }

    updatePending = setTimeout(update, 250);
}

function update() {
    updatePending = false;

    //$.ajax(...
}

De asemenea, probabil ar trebui să adăugați:

$('input.Search').bind("blur", update);

Aceasta va face o actualizare imediată când utilizatorul va părăsi câmpul. Dar asigurați-vă că adăugați și manevrarea cazului în care utilizatorul părăsește câmpul în timp ce există o actualizare întârziată în așteptare (anulați mai întâi actualizarea întârziată).

3
adăugat
Acest lucru funcționează perfect - mulțumesc.
adăugat autor Herb Caudill, sursa

Ca o primă abordare, cum ar fi:

$('input.Search').bind("keyup", function() { setTimeout(update, 5) } );

(nu sunteți sigur de sintaxa exactă setTimeout).

De asemenea, puteți păstra o variabilă pentru a urmări dacă intervalul de timp a fost deja programat sau nu.

0
adăugat
Acest lucru va afecta efectiv aceeași încărcătură inutilă, după ce așteptați 5 milisecunde.
adăugat autor Ates Goral, sursa

Poți să folosești Window.SetTimeOut (YourRefreshMethod), când call-ul YourRefereshMethod devine apelat, acesta va verifica numărul de caractere care au fost tipărite până acum și îl va compara cu un numărător, contorul va începe cu valoarea 0, deci apelul inițial nu va face nimic altul decât actualizarea contorului cu caracterele curente numărate, a doua oară când metoda dvs. va fi apelată, va verifica numărul de caractere introduse, dacă se potrivește cu numărul anterior înregistrat de contor, atunci înseamnă că utilizatorul nu a scris nimic nou și puteți declanșa metoda de actualizare, altfel veți actualiza valoarea contorului

0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com