防抖 节流 个人理解

函数防抖

• 函数防抖：单位时间内，频繁触发事件，只会触发最后一次
• 函数防抖实际开发应用场景： 实时获取输入框文本
  小知识:王者荣耀的回城

函数节流

• 函数节流：单位时间内，频繁触发事件，只会触发一次
• 函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能
  小知识:王者荣耀的技能

// 防抖
  const debounce = (fn, delay = 1000) => {
    let timer = null
    return function (...args) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
      
    }
  }


// 节流函数
const throttle = (fn, delay = 1000) => {
    let timer = null
    return function (...args) {
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(this, args)
          timer = null
        }, delay)
      }
    }
  }

示例:

<template>
  <input type="text" placeholder="请输入值" @input="input" v-model="msg">
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
name:'demo-',
setup(){
 //防抖
  const debounce = (fn, delay = 1000) => {
    let timer = null
    return function (...args) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)

    }
  }

let msg=ref('')
const input=debounce(()=>{console.log(msg.value)},1000)

  return{
    debounce,
    msg,
    input
  }
}
}
</script>