SOURCE

Vue.createApp({
    setup() {
        const { ref, watch } = Vue
        const keyword = ref('')
        const search = jieliu(() => {
            console.log('搜索：' + keyword.value)
        }, 1000)
        const inputChange = fangdou(() => {
            console.log('内容改变', + keyword.value)
        }, 1000)
        return {
            keyword,
            search,
            inputChange
        }
    }
}).mount('#app')

// 防抖，前面的所有的触发都会被取消，最后一次执行在规定的时间之后才会触发
function debounce(fn,delay){
  let timer = null
  return function() {  //借助闭包
    let th = this;
    let args = arguments;
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      fn.apply(th, args)
    },delay)
  }
}

// 节流，一段时间内只能有一次请求
function throttle(fn, delay) {
    let flag = true
    return function() {
        let th = this
        let args = arguments
        if (!flag) return false
        fn.apply(th, args)
        flag = false
        setTimeout(() => flag = true, delay)
    }
}

function fangdou (fn, delay) {
    let timer = null
    return () => (timer && clearTimeout(timer), timer = setTimeout(() => fn.apply(this, arguments), delay))
}

function jieliu(fn, delay) {
    let flag = true
    return () => flag && ( fn.apply(this, arguments),
        flag = !flag,
        setTimeout(() => flag = !flag, delay))
}

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
    <input type="text" v-model="keyword" @input="inputChange"/>
    <button @click="search">搜索</button>
</div>