Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Используйте фон

Функция anti-shake на самом деле является необходимым навыком для фронтенд-студента. Я всегда ленился и для достижения этой цели позаимствовал загрузку страниц или загрузку кнопок. Недавно я разрабатываю апплет WeChat. Слишком большая загрузка вызовет неприятные ощущения. В то же время использовать загрузку для предотвращения тряски при переходе на страницу непросто. Следовательно, несколько последовательных кликов приведут к многократному вырезанию страницы, поэтому для достижения этой цели нам придется использовать функцию защиты от сотрясений.

2. Реализация кода

Без дальнейших церемоний, давайте перейдем непосредственно к коду.

/* 防抖函数封装 */
let timer
export const debounce = (fn, delay = 500) => {
  return  (...args) => { // 传入形参！！！
      let that = this
      timer && clearTimeout(timer)
      timer = setTimeout(function () {
        console.log("防抖函数执行", args)
        fn.apply(that, args) // 用apply指向调用debounce的对象，相当于this.fn(args);
      }, delay)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

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

3. Практическое применение

3.1 Реализация защиты от тряски при переходе на страницу

export function goPage(url) {
    debounce((url) => {
    	url && wx.navigateTo({ url })
    })(url)
}

// 页面调用
goPage('.pages/home/index')
1
2
3
4
5
6
7
8
9

3.2 Реализация защиты от тряски взаимодействия со страницами

gotoShop(value) {
  debounce((value) => {
         // 接收外部传来的value参数，进行后续逻辑处理
     })(value) // 接收外围函数的参数，丢到防抖函数里，有兴趣的同学也可以了解一下闭包
 },
1
2
3
4
5

В настоящее время два вышеупомянутых приложения являются наиболее распространенными. Если вам это нравится, пожалуйста, поставьте палец вверх.