<script setup>
import { onMounted, ref } from "@vue/runtime-core";
onMounted(() => {
let elem = document.querySelector("#elem");
console.log(elem);
elem.oninput = function () {
inner();
};
});
function fdjl() {
var timer = null; //你平时保存的这个timer变量,其实是定时器序号,代表的是第几个定时器,而且第一次从1开始的
return function () {
if (timer) {
clearTimeout(timer); //停止一次性定时器
timer = null; //给了一个状态
}
timer = setTimeout(function () {
console.log("防抖成功");
}, 1000);
};
}
var inner = fdjl();
<template>
<div><input type="text" id="elem"></div>
</template>
方法一
方法二
import { onMounted, ref, reactive } from "@vue/runtime-core";
const a = ref(100);
const debounce = (fn) => {
let timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, 2000);
};
};
const methods = reactive({
handleMouseover: debounce(function () {
a.value += 100;
}),
});
<template>
<div>
<h2 ref="name" @mouseover="methods.handleMouseover">250520</h2>
{{ a }}
</div>
</template>