Vue Super UI

切换模式

本文总阅读量 次

节流 ​


如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间（delay）期限内不再工作，直至过了这段时间才重新生效

Show Source Code
ts
function throttle (fn: Function, delay = 300): any {
  var valid = true
  return function () {
    if (valid) {
      valid = false // 将函数置为无效
      rafTimeout(() => {
        fn()
        valid = true
      }, delay)
    }
    return false // valid为false时，函数不执行
  }
}

何时使用 ​

  • 短时间内大量触发同一事件时，每 delay ms 内函数只执行一次

基本使用 ​

打开控制台查看输出

vue
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { throttle } from 'vue-super-ui'

onMounted(() => {
  document.onscroll = throttle(showPosition, 1000)
})
onUnmounted(() => {
  // 移除键盘切换事件
  document.onscroll = null
})
function showPosition () {
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  console.log('滚动条位置：' + scrollTop)
}
</script>

Params ​

参数说明类型默认值必传
fn要执行的函数Function-true
delay函数失效时长，单位msnumber300false