Время для чашки чая🍵, чтобы вы полностью научились писать от руки, предотвращая дрожание.

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

Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

☀️ Предисловие

  • некоторое время назадгруппа друзейЯ не могу сказать разницу во время интервью.防抖а также节流.
  • фактически防抖а также节流Мало того, что вы будете написаны от руки на собеседовании, но это также может сыграть роль в оптимизации производительности в реальных проектах, поэтому его все же необходимо освоить.
  • Далее я воспользуюсь чашкой чая, чтобы показать вам, как тщательно выучить почерк.防抖а также节流.

🍀 Защита от сотрясений

🌰 🌰

  • Сначала отбросим понятие, на самом деле их много防抖пример:
    • Например, компьютер, которым вы сейчас пользуетесь, автоматически переходит в спящий режим на некоторое время после того, как вы им не пользуетесь.
    • Повторно активируйте его, когда вы снова используете его, и начните обратный отсчет времени до установленного вами времени.10минута
    • В этот10Обратный отсчет начнется снова, если вы продолжите использовать компьютер в течение нескольких минут.10минута
    • Перезапустите обратный отсчет, когда вы использовали компьютер в последний раз и вышли10Через несколько минут компьютер уходит в сон

image.png

  • На самом деле это основная концепция анти-тряски~Грубо говоря, он выполняется только один раз за период времени, то есть компьютер над нами включается только в это время.
  • Наше использование компьютеров выше может быть понято как触发事件, а так же, как я отметил вышеsetTimeoutа такжеclearTimeoutПо сути, это основной элемент защиты от тряски.
  • Конечно, это пример из жизни, и мы действительно часто используем его в нашей повседневной разработке, например, мы настраиваем размер страницы, проверяем, повторяется ли определенное поле формы, и контролируем количество запросов. чтобы форма не отправлялась несколько раз.

✍️ Стабилизация почерка

  • Сказав так много, я думаю, все, наверное, понимают防抖концепции, то теперь мы реализуем防抖Ну, предположим, мы хотим нажать кнопку, чтобы добавить новое сообщение, конечно, мыЯ не хочу называть интерфейс новым каждый раз, когда я нажимаю, нам нужно несколько кликовдобавить только один раз, как мы должны написать это?

image.png

  • Во-первых, мы просто моделируем процесс нажатия кнопки.
// debounce.js
let addBtn=document.getElementById('add')
function addOne(){
  console.log('增加一个')
}
addBtn.addEventListener('click',addOne)
  • Поскольку нам нужно обработать выполненное событие, нам нужно его затем инкапсулировать.addOneфункция.
// debounce.js
let addBtn=document.getElementById('add')
function addOne(){
  console.log('增加一个')
}
function debounce(fun){
  return function(){
    fun()
  }
}
addBtn.addEventListener('click',debounce(addOne))
  • Мы использовали замыкание выше, чтобы справиться с этимaddOneфункция, далее нам нужно добавить задержкуsetTimeoutдля обратного отсчета, когда мы нажимаем кнопку2sВыполнить снова.
// debounce.js
function debounce(fun,time){
  return function(){
    setTimeout(()=>{
      fun()
    },time)
  }
}
addBtn.addEventListener('click',debounce(addOne,2000))
  • Теперь цель задержки достигнута, но каждый клик будет добавлять новуюsetTimeoutИ это не дает эффекта, который мы выполняем только один раз для нескольких кликов.
  • В настоящее времяclearTimeoutвыходит на сцену, нам нужно, чтобы после того, как мы нажмем кнопку, котораяdebounceПри выполнении предыдущийsetTimeoutОчистите и перезапустите таймер.
function debounce(fun,time){
  let timer
  return function(){
    clearTimeout(timer)
    timer=setTimeout(()=>{
      fun()
    },time)
  }
}
  • Теперь одна из наших антивибрационных функций завершена, но это еще не конец, если мы находимся вaddOne()Распечататьthisобнаружит, что мы делаем этоthisуказывает наWindowиз.
  • Это, конечно, не то, что мы хотим, нам нужно использоватьapplyизменитьthisТочка, и нам нужно учитывать параметры функции выполнения, потому что в разные функции обязательно будут переданы разные параметры, для параметров мы можем использоватьargumentsиметь дело с.
function debounce(fun,time){
  let timer
  return function(){
    clearTimeout(timer)
    let args = arguments
    timer=setTimeout(()=>{
      fun.apply(this,args)
    },time)
  }
}
  • так что наш防抖函数Это делается вручную, и это не кажется сложным.
  • в общем防抖находится в постоянной работе (печать, щелкнуть и т. д.)Способ повышения производительности, который в конечном итоге выполняется только один раз.

🍁 Дросселирование

🌰 Например

  • Конечно, примеров дросселирования в нашей жизни немало, интересно, обращали ли вы внимание на разбрызгиватели в парке:
    • Как правило, мы устанавливаем предполагаемое время для разбрызгивателя.30min
    • Когда с момента последнего полива прошло недостаточно времени30minоставался неподвижным, пока
    • и когда он придет30minвызовет событие спринклера

image.png

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

✍️ Рукописный дроссель

  • Сказав так много, я думаю, все, наверное, понимают节流концепции, то теперь мы реализуем节流Итак, предположим, теперь мы хотим реализовать событие печати прокрутки мыши,Хочу это3sвыполнить один раз, как мы должны написать это?

image.png

  • Сначала мы моделируем триггерное событие.
// throttle.js
function scrollTest(){
  console.log('现在我触发了')
}
document.addEventListener('scroll',scrollTest)
  • Далее мы инкапсулируем функцию троттлинга, как и антишейк, нам также нужно использовать замыкание и, кстати, добавить параметр для получения времени троттлинга.
// throttle.js
...
function throttle(fun,time){
  return function(){
    fun()
  }
}
document.addEventListener('scroll',throttle(scrollTest,3000))
  • Поскольку наше регулирование длится в течение определенного периода временивыполнить один разТо есть, если интервал времени между двумя прокрутками мышиНе выполняется до установленного времени.
  • Затем мы можем записать временную метку каждого свитка для сравнения.
// throttle.js
...
function throttle(fun,time){
  let t1=0 //初始时间
  return function(){
    let t2=new Date() //当前时间
    if(t2-t1>time){
      fun()
      t1=t2
    }
  }
}
  • Мы запишем два раза одинt1представляет собой начальный момент времени at2Представляет текущее время, если расстояние текущего времени от предыдущего времени, то есть начального времени, больше установленногоtime.
  • то мы можем выполнитьfun()И меняем начальное время на время этого исполнения, чтобы каждый раз при выполненииt1становится временем последнего выполнения.
  • На этом одна из наших функций дросселирования завершена.
// throttle.js
...
function throttle(fun,time){
  let t1=0 //初始时间
  return function(){
    let t2=new Date() //当前时间
    if(t2-t1>time){
      fun()
      t1=t2
    }
  }
}
  • Конечно, нам также нужно изменить то же самое, что и анти-шейкthisУказание и получение параметров, это окончательное завершение.
// throttle.js
...
function throttle(fun,time){
  let t1=0 //初始时间
  return function(){
    let t2=new Date() //当前时间
    if(t2-t1>time){
      fun.apply(this,arguments)
      t1=t2
    }
  }
}
  • До сих пор функция дросселирования была выполнена вручную, не сложно?
  • в общем节流только что вСпособ повысить производительность, непрерывно работая в течение определенного периода времени и выполняя его только один раз в указанное вами время.

👋 Напишите в конце

  • Прежде всего, большое спасибо за то, что увидели это, эта статья будет опубликована здесь~
  • для防抖а также节流Самый субъективный метод оценки:10sвнутри васСумасшедший щелчок кнопки, если использоватьAnti-shake будет выполняться только один раз, и вы использовалиДросселирование будет выполняться время от времени, это время можно контролировать самостоятельно.
  • Конечно防抖а также节流Есть еще много деформаций, и разные функции трансформируются в соответствии с разными потребностями, нопостоянно меняющийся, пока вы понимаете описанный выше метод, остальные будут в порядке.
  • Если вы считаете эту статью полезной, пожалуйста,🍉 Подписаться + Нравится + Избранное + Комментарий + Ретвитнуть 🍉Поддержите~~😛Ваша поддержка - самая большая мотивация для моего обновления.
  • Если вы хотите обсудить и узнать больше о интерфейсе со мной, вы можете присоединиться ко мне.Учебная группа по внешнему обмену, давай поговорим о мире вместе~~~

🌅 Прекрасное прошлое

Bytes не отправляет вам лунные пироги? 🎑Тогда я отправлю его вам лично! 🥮 Он есть у всех!

Я нарисовал 5 картинок, чтобы помочь вам легко победить динамическую маршрутизацию разрешений!

Менеджер по продукту: Можете ли вы заставить облако слов двигаться?

Одна статья, чтобы выделить карусель карты echarts ⚡

Категории