Простая реализация кода «анти-тряски» во внешнем JavaScript

внешний интерфейс JavaScript
Простая реализация кода «анти-тряски» во внешнем JavaScript

Это 17-й день моего участия в Gengwen Challenge, Подробности о мероприятии см.:Обновить вызов

прелюдия 🌰

После завершения предыдущей статьи мы знаем, что инициирование событий с высокой частотой в короткий промежуток времени может привести к неблагоприятным последствиям.

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

  • Частота взаимодействия внешних и внутренних данных слишком высока, что приводит к потере трафика.
  • Интерфейс часто визуализируется и обновляется, вызывая задержки страниц, зависания или приостановку анимации, влияющие на работу.

Прежде чем перейти к сути, давайте взглянем на следующий пример:

<form action="" class="example-form">
    <div>
        <label for="name">名称</label>
        <input type="text" 
               name="name" 
               id="name" 
               placeholder="please input your name"
         >
    </div>
    <div>
        <label for="res">输入</label>
        <textarea type="multipart" 
                  name="res" 
                  id="res" 
                  placeholder="这里是每一次输入的结果"
        ></textarea>
    </div>
</form>

window.onload = () => {
    const inputEle = document.querySelector("#name");
    const resEle = document.querySelector("#res");
    inputEle.addEventListener("input", function (event) {
        console.log(this.value);
        resEle.value += `\n${ this.value }`
    });
}

频繁触发

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

Новые потребности 🤬

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

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

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

  • Отправка данных каждые несколько секунд — регулирование
  • Всякий раз, когда пользователь перестает вводить, запускать отсчет времени и отправлять данные через определенный период времени - защита от сотрясений

Стабилизатор

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

window.onload = () => {
    const resEle = document.querySelector("#res");
    function changeOutputVal(value) {
        resEle.value += `\n${ value }`;
    }

    function debounce(fn, delay = 1000) {
        let timer = null;
        return function (...args) {
            console.log(args);
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }

            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay);
        }
    }

    const outputRes = debounce(changeOutputVal, 1000);

    const inputEle = document.querySelector("#name");

    inputEle.addEventListener("input", (eve) => {
        outputRes(eve.target.value);
    });
}

Описание кода:

  1. Каждый раз, когда запускается событие, текущий таймер сбрасывается, а вызов тайм-аута сбрасывается, то есть пересчитывается время. Это приведет к тому, что каждое высокочастотное событие отменит предыдущий вызов тайм-аута, в результате чего обработчик события не будет запущен;
  2. Только когда высокочастотные события прекращаются, последний вызов тайм-аута, инициированный событием, может быть выполнен по истечении времени задержки.

Эффект операции следующий:

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

Суммировать

Умело используя функцию защиты от сотрясений, можно не только оптимизировать производительность, но и оптимизировать эффект отображения, убивая двух зайцев одним выстрелом.

~

~

Код относительно грубый и базовый, и в будущем он будет постепенно итерироваться в сторону усложнения.Надеюсь вы посмотрите официальный Хайхан🙏🙏

~

~

~ Конец этой статьи

Получайте интересные знания, встречайте интересных друзей и формируйте интересные души!

Всем привет! Я автор книги «Программирование самадхи».Король-затворник, Моя официальная учетная запись "Программирование самадхи", пожалуйста, обратите внимание, я надеюсь, что вы можете дать мне больше советов!

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

mianshi

Категории