写一个防抖函数和节流函数

防抖的解释：在一定时间内，多次触发，只运行最后一次，多次触发时，则会把前面执行的函数去掉，重新开始计时，直到没有触发后，执行最后一次。适用场景：input远程搜索，在输入完成后，才会进行搜索。

/**
 * 函数防抖 在一段时间内，多次执行，则会把前面执行的函数去掉，重新开始计时，直到没有触发后，执行最后一次
 */
export const Debounce = (fn, t = 500) => {
  let timeout = null
  return function() {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
    }, t)
  }
}

使用

// 引入防抖函数
import { Debounce } from '@/utils/debounce'

//使用
// 搜索input标签上的change事件
    InputChange (val) {
      Debounce(
        this.searchName( val ), // 按名称查找的方法
        500
      )
    },

节流的解释：在一定时间内，只触发一次，不会引起重新计时，场景：scroll、resize

/**
* 函数节流 
*/
export const Throttle = (fn, t = 500) => {
  let canRun = true
  return function() {
    if (!canRun) return
    canRun = false
    setTimeout(() => {
      fn.apply(this.arguments)
      canRun = true
    }, t)
  }
}

//  这里是vue3的写法只
const listWrapper = Vue.ref(null);
 const scrollFn = (e) => {  };
 let fn = throttle(scrollFn)
   Vue.onMounted(() => {
       listWrapper.value.addEventListener('scroll', fn);
   });
   return {
       scrollVal
   };