За _.throttle _.debounce и написани много. Но аз не искам да се хвърлят върху линка към описанието на тези функции в официалната документация - вие и те не ме намери. Подчинявайки стар навик, ще демонстрират какви проблеми да помогне за разрешаване на маркиран функция.

Това е един от тези трикове, които аз силно препоръчвам да се знае и да използва в предния край развитие. Можете дори да гледате само демото. Само не забравяйте да отворите конзолата, за да се разбере какво се случва. И всеки да се занимава с този въпрос по молба котка.

за газта

Такива операции са красиви и обичат нашите клиенти, но за съжаление, дават по-голямо натоварване на браузъра и Дом. Нека да напише един прост пример за манипулатор на събитие промените размера на прозореца.

Този код е само изход от ширината на прозорец на конзолата. Можете да я видите тук - демо страница. Единицата за газта, изберете "Обикновено промените размера на прозореца." Опитайте се да свири на размера на прозореца и ще видите, че тази функция работи десетки пъти дори малка промяна в ширината.

Сега си представете, че _onResizeWindow не сме написал console.log безвреден, както и редица операции по сложни манипулации с дом - vzvoet браузър, а понякога и да започне да се забавя рендиране. Може да се наложи това изглежда малко вероятно, тъй като всички останали не са вече Pentiums. Но аз не само убеден, че една от причините много спирачки на сайта е не е оптимално за работа тук с такива незабележими малки неща, като например да превъртате и преоразмеряване. Но за да се намали натоварването на браузъра, което трябва да направите малко по - използва _.throttle

_.throttle увива желаната функция и дава индикация да тече не по-често от веднъж на всеки N милисекунди. В нашия случай, ние се посочи 300 - това е стандарт продължителността на времето, за които потребителят не забелязва забавяне в интерфейса и времето на браузъра, за да извърши необходимите манипулации Дом. Разбира се, без фанатизъм, ако на всеки да преначертае цялото съдържание на страницата, не трикове, няма да ви помогне :-)

Нека се върнем към страницата демо. Изберете "Промяна на размера прозорци _.throttle" и се уверете, че функцията работи много по-малко (за демонстрацията е настроен на 500). По този начин, тъй като често не предизвиква едно събитие, _.throttle не даде желаната функция да тече твърде често и да се създаде допълнително натоварване на вашия браузър.

за debounce

А сега погледнете друг пример, свързан с изпълнението на интерфейса, както и ще се занимава с _.debounce.

Представете си, че имаме на сайта съществува определена поле за въвеждане, коректност на данните, в която искате да проверите в интернет. Не и когато потребителят кликне върху бутона "Изпращане", както и правото в процеса на набиране на персонал, възможно най-скоро, за да го информира за грешката (разбира се, трябва да го направите внимателно).

На функция isValidEmail не обръщат внимание, редовен сезон за бързо го Google в Интернет (въпреки това, тя работи доста добре). Вижте извадка може да бъде на една и съща страница на демонстрацията. Секцията debounce, изберете "Прост натискане на бутони". Сега отворете конзолата и започнете да въвеждате всеки имейл. В конзолата веднага валя console.error грешки точно толкова дълго, докато сте въвели валидно поща.

Тук ние виждаме два проблема.

На първо място, ние не трябва да отчужди потребители и да ги информира за грешката на всяко натискане на клавиш. В крайна сметка, най-често това не е наред, но просто не може да започне печат необходимия ред. Няма нужда да се отново да се отвлече вниманието на хората от този процес.

Вторият проблем е още по-лошо: например, ние не се провери електронна поща и пишат онлайн преводачески услуги като Google Преводач. И ние не се нуждаем проверка на клиента, като бомбени Аякс заявки до сървъра. Което, разбира се, изисква много повече време и пропилени ресурсите на сървъра. Това е, когато, вместо един тест на [email protected] сървъра ще се занимава с т, ТЕ, TES, тест. и така нататък, докато желаната [email protected].

И в двата случая, ние можем да помогнем на такъв метод: Стартирайте желаната функция (_onKeyupEmailInput) не веднъж, а само известно време след събитието при пускане на браузъра (ние keyup). Това ще помогне на посетителите да получат лесен електронна поща, но когато той приключи, и да спре да кликнете върху клавишите, стартирайте функцията за проверка, която вече определя Въведеният имейл-а. Във всеки случай, този подход е много по-вероятно, че кодът ще работи с данни, които потребителят иска да ни каже, а не с влязъл наполовина.

Надяваме се, проблеми и решения са ясни, нека да видим как е направено в кода - за ужас гледа пример с _.throttle

Ние добавихме функция обвивка и го завърза към входния keyup. Вижте, каква е разликата в страницата демо - изберете "Щракването с бутони _.debounce".

И това е всичко, което исках да кажа за газта на прекрасни функции и debounce. Надявам се, че е убеден в мъдростта на използването на такива техники в практиката, както и тези функции ще станат ваши незаменими помощници.

Връзки от член

демонстрационни приложения
Източник - демо страницата с изходен код, по-подробна, отколкото в статията.