Hogyan és miért kell használni a gázt és a pergésmentesítési az aláhúzás vagy lodash, webdevkin

Mintegy _.throttle _.debounce és írásbeli sokat. De én nem akarom, hogy dobja a kapcsolatot a leírás ezen funkciók a hivatalos dokumentumok - te és úgy találják, hogy nem. Engedelmeskedve egy régi szokás, fogok bemutatni, milyen problémák megoldása érdekében a megjelölt funkciót.

Ez egyike azoknak a trükköket, hogy én nagyon ajánlom, hogy ismerje és használja a front-end fejlesztés. Akkor is csak nézni a demo. Csak ne felejtsük el, hogy nyissa ki a konzolt, hogy megértsük, mi történik. És mindenki foglalkozni ezzel a témával több kérve egy macska.

körülbelül fojtószelep

Az ilyen műveletek szép és szeretem az ügyfelek, de sajnos, hogy nagyobb terhelést a böngésző és dom. Írjunk egy egyszerű példa egy eseménykezelő átméretezni az ablakot.

Ez a kód csak kimenet a konzol ablak szélessége. Láthatjuk, hogy itt - a demo oldalt. A fojtószelep egység, válassza ki a „Simple átméretezni az ablakot.” Próbálja meg lejátszani a az ablak méretét, és látni fogja, hogy ez a funkció több tucat alkalommal még egy kis változás a szélessége.

Most képzeljük el, hogy _onResizeWindow még nem írt a console.log ártalmatlan, és számos műveletek komplex manipulációk dom - vzvoet böngésző, és néha elkezd lassulni renderelés. Szükség lehet ez nem tűnik valószínűnek, mert a többinek még nem Pentiums. De én nem csak meggyőződve arról, hogy az egyik oka annak, hogy a fékek a honlapon nem optimális munka itt olyan feltűnő kis dolgok, mint például a görgetést és átméretezés. De ahhoz, hogy csökkentsék a terhelést a böngésző, amit tennie kell, csak egy kicsit - használt _.throttle

_.throttle pakolások a kívánt funkciót, és adja azt jelzi, hogy futtatni nem gyakrabban, mint egyszer minden N milliszekundum. A mi esetünkben azt is jelezzük, 300 - ez a szokásos időtartam, amelyre a felhasználó nem veszi észre a késedelem a felület és a böngésző idő, hogy végre a szükséges manipulációk dom. Természetesen anélkül, fanatizmus, ha mindenki, hogy dolgozza át a teljes tartalmát az oldal, semmi trükk nem fog segíteni :-)

Térjünk vissza a bemutató oldal. Válassza ki a „Resize ablakok _.throttle”, és biztosítja, hogy a funkció sokkal kevésbé (a bemutató beállítása 500). Így, mivel ez gyakran nem okoz olyan esemény, _.throttle nem adja meg a kívánt funkciót futtatni túl gyakran, és hozzon létre extra terhelést a böngészőben.

körülbelül pergésmentesítési

És most nézd meg egy másik példát teljesítéséhez kapcsolódó, a frontend és foglalkozik _.debounce.

Képzeljük el, hogy mi van az oldalon van egy bizonyos beviteli mező, az adatok helyességét, ahol szeretnénk, hogy ellenőrizze az online. Nem, ha a felhasználó rákattint a „Küldés” gombra, majd jobb a felvételi eljárás során, a lehető leghamarabb, hogy tájékoztassa őt a hiba (persze, meg kell csinálni óvatosan).

A isValidEmail funkció nem figyel, alapszakaszban a gyors Google ez az interneten (bár ez meglehetősen jól működik). Tekintse meg a minta lehet mind ugyanazon az oldalon a demo. A pergésmentesítési részben válassza a „Egy egyszerű gombnyomás,”. Most nyissa ki a konzolt, és kezdje el beírni e-mail. A konzol azonnal gázol console.error hibákat pontosan mindaddig, amíg be nem lépett az érvényesen-mailben.

Itt két probléma.

Először is, nem idegenítheti el a felhasználók, és tájékoztatja őket a hiba minden gombnyomásra. Végtére is, a leggyakrabban ez nem rossz, de egyszerűen nem tud azonnal nyomtatni kívánt vonalat. Nem kell még egyszer, hogy elvonja az embereket a folyamatot.

A második probléma még rosszabb: például, mi nem ellenőrizzük az e-mail és a levelet online fordítási szolgáltatás, mint a Google Translate. És nem kell ellenőrizni az ügyfél, mint a bomba ajax-kéréseket a szerver. Amihez persze sokkal több időt és elvesztegetett szerver erőforrásait. Ez az, amikor ahelyett, hogy egy teszt [email protected] szerver fog foglalkozni t, te, tes, teszt. és így tovább, amíg a kívánt [email protected].

Mindkét esetben tudunk segíteni egy ilyen módszer: Fuss a kívánt funkciót (_onKeyupEmailInput) nem is egyszer, de csak egy ideig, miután a kiváltó esemény a böngésző (mi keyup). Ez segít a látogató ahhoz, hogy könnyebben mailt, de amikor befejezte, és megáll kattintva a kulcsokat, indítsa el a hitelesítési funkció, amely már meghatározza a megadott e-mail-a. Mindenesetre, ez a megközelítés sokkal valószínűbb, hogy a kód működni fog az adatokat, hogy a felhasználó azt akarja mondani, nem fél lépett.

Remélhetőleg, problémák és megoldások egyértelmű, lássuk, hogyan történik a kód - a horror néz egy példát _.throttle

Adtunk egy funkciókban borítót, és kötötte a bemeneti keyup. Nézd, mi a különbség a demo oldal - válassza ki a „Kattintás _.debounce gombok”.

És ez minden, amit el akartam mondani a csodálatos funkciók fojtószelep és visszaállási. Remélem, hogy meggyőződése, hogy a bölcsesség a ilyen technikák alkalmazása a gyakorlatban, és ezeket a funkciókat lesz a nélkülözhetetlen segítők.

Linkek cikk

demóalkalmazásokban
Forrás - a forráskód demóoldal részletesebb, mint a cikkben.