踩了个坑，记录一下
// debounce
<template>
<!-- 生效 -->
<el-input v-model="value" @keyup="handelKeyUp"></el-input>
<!-- 不生效 -->
<el-input v-model="value" @keyup="debounce(handelKeyUp2,300)"></el-input>
</template>
<script setup>
import { ref } from "vue";
let value = ref("");
// 不生效
function handelKeyUp2 (args) {
console.log("请求url", value.value, args);
};
// 生效
const handelKeyUp = debounce(function (args) {
console.log("请求url", value.value, args);
}, 300);
function debounce(fn, delay = 200) {
let timeout = null;
return function (...args) {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function () {
fn.apply(this, args);
}, delay);
};
}
</script>
