На данный момент забудьте о «функции устранения дребезга» и «регулировании функции».

JavaScript

предисловие

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

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

Функция защиты от тряски

Забудьте пока о стабилизации функции.

Сначала есть потребности, а потом решения.Давайте сначала опишем простой бизнес-сценарий:

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

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

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

Итак, как мы узнаем, что пользователь перестал печатать?

еслиN秒Содержимое поля ввода не изменилось, можно предположить, что пользовательхватит печататьилиПауза при вводе.

    let timer;
    const input = document.querySelector('input');

    input.addEventListener('input', function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // 执行具体代码
        }, 500)
    })

Посмотреть демо:

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

регулирование функции

Забудьте пока о регулировании функций.

Опишем простой бизнес-сценарий:

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

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

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

    // 点赞数
    let likes = 0;
    // 定时器标识
    let timer;
    
    /*
    * 用户点赞函数
    * */
    function clickButton() {
        likes++;
        
        if ( timer ) return;
        
        timer = setTimeout(() => {
            // 执行网络请求
            // ajax...
            
            // 点赞数重置
            likes = 0;
            
            // 重置timer
            timer = null;
        }, 300)
    }

Посмотреть демо:

Суммировать

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

Главное — понять, зачем вы это делаете.

Категории