Автор оригинала: Sulaiman Abolaji Bisiriyu.

От RXJS Обзор RXJS – это библиотека для сочинения асинхронных и программ на основе событий, используя наблюдаемые последовательности. Он изменил то, как разработчики думают, что при строительстве приложений он позволяет лечить данные в качестве потока, поскольку он меняется через время, другими словами:

Все это поток

В этой статье я собираюсь говорить о том, как реализовать дросселирование и дебактирующее событие из полей ввода, примеры случаев его использования являются:

• (Дебаз) Вы хотите убедиться, что пользователь завершил выполнение действий перед выполнением задачи E.G Подождите, пока пользователь закончил ввод в поле ввода перед отправкой запроса AJAX, чтобы запросить дБ.
• (Дроссель) Вы хотите контролировать скорость, при котором событие уволяется, чтобы уменьшить количество времени, которое будет работать соответствующая задача E.G У вас есть поле AUTCOMPLETE, которое запрашивает вашу БД, и вы хотите, чтобы заглотить скорость, при котором уволено входное событие, (чтобы избежать слишком большого количества запросов, чтобы быть отправленным в течение короткого времени).

Для демонстрационных целей я собираюсь создать простое приложение, которое показывает, как вы можете дросселировать и отбросать событие ввода текстового ввода.

Для начала я бы создал простой проект, который имеет следующую структуру папки:

|------
  --- index.html
  --- throttle.js
  --- debounce.js
  --- app.js

Сначала мы создаем нашу index.html Файл, а контент будет выглядеть так: index.html.

    
    
    
    

    
    

    



    
Throttle And Debounce With Rxjs Observable


    

        

            

                
Throttle
                
                
Output:
                

                

            
            

                
Debounce
                
                
Output:
                

                

            
        
    

    

    
    
    

Здесь нет ничего особенного, я импортировал Bootstrap CSS из CDN для небольшого стиля. Я также создал два входных поля и дал им уникальные идентификаторы, а также Divs для вывода значений поля ввода. Если вы прокручиваете, до того, как перед закрывающим тегом тела I импортировал библиотеку RXJS из CDN и другой файл сценария, который мы создание.

Теперь как переподготовка, чтобы создать наблюдаемое из события, которое мы используем Fromevent () метод

var clickObservable = Rx.Observable.fromEvent(document.querySelector('button'), 'click');

и отслеживать событие, как разворачивается, мы подписываемся на наблюдаемый

clickObservable.subscribe(() => console.log('Clicked!'));

Это похоже на обычный JavaScript, как

var button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));

Далее мы создаем throttle.js Файл, здесь мы создаем функцию под названием дроссель Это требует три параметра (селектор запроса элемента, событие и время плетена), он создает наблюдаемый от указанного события и дроссельной обработки его с указанным временем, но мы собираемся по умолчанию на 2S (2000 мс). throttle.js.

function throttle(el, event, time = 2000) {
  // create a reference to the element
  var element = document.querySelector(el);
  // attach an observer
  var eventObserver = Rx.Observable.fromEvent(element, event);

  // call the throttleTime method on the observable passing the time,
  // map tru the events an get the value of the input
  // return an observable to be subscribed to
  return eventObserver.throttleTime(time).map(event => event.target.value);
}

В функции обратите внимание на Throttletime () Метод, он используется для затравки события, выпущенного на поле ввода, поэтому событие уволено после каждого время Миллисекунды указаны. После чего мы отобразим событие и вернем значение входного поля.

Далее мы создаем debouts.js Файл, здесь мы создаем функцию под названием Дебати Требуется три параметра (селектор запроса элемента, событие и время отработка), оно создает наблюдаемый от указанного события и отборочно, до того, как указанное время не прошло после того, как событие было уволено, но мы собираемся по умолчанию до 2s (2000 мс). debouts.js.

function debounce(el, event, time = 2000) {
  // create a reference to the element
  var element = document.querySelector(el);
  // attach an observer
  var eventObserver = Rx.Observable.fromEvent(element, event);

  // call the debounveTime method on the observable passing the time,
  // map tru the events an get the value of the input
  // return an observable to be subscribed to
  return eventObserver.debounceTime(time).map(event => event.target.value);
}

В функции обратите внимание на debouncetime () Метод, он используется для расстройства события, выпущенного на поле ввода, поэтому событие уволено время Миллисекунды после того, как пользователь закончил печатать. После чего мы отобразим событие и вернем значение входного поля. Обычное решение представляет собой дебактирующее устройство или программное обеспечение, которое гарантирует, что в течение определенного времени может быть зарегистрировано только один цифровой сигнал (обычно миллисекунды).

Прямо сейчас, что осталось, это позвонить в функции и подписаться на возвращаемые наблюдаемые. Это будет сделано в app.js файл. app.js.

throttle('#throttle-field', 'input').subscribe(value =>
  print('#throttle-output', value)
);

debounce('#debounce-field', 'input', 500).subscribe(value =>
  print('#debounce-output', value)
);

function print(el, val) {
  if (!val) return;
  var data = document.createElement('pre');
  data.innerHTML = val;
  document.querySelector(el).appendChild(data);
}

Я создал помощник Печать Функция для добавления указанного значения указанному элементу.

Теперь мы можем открыть index.html Файл в браузере для тестирования Ссылка Полный проект можно найти здесь

Спасибо. Пожалуйста, не стесняйтесь дать свое мнение о статье, касающемся дополнений или пропусков, следуйте за мной в Twitter @ Аболаджи Я планирую писать внедрение в угловой момент. Приветствия