vue单击事件click实现双击和连击事件

#创作灵感：

        在实现抖音的点赞功能时发现，双击dbclick和单击click事件一起绑定会失效双击事件。于是我对单击事件增加延迟判断，实现了双击事件。结果发现点赞的触发时机并不单是双击事件，而是在第一次双击之后的每次点击都出现点赞动画，也就是连击。于是我又写了一个连击事件

---

双击事件实现思路：

       对单击事件做一个单击or双击的判断，单击事件由setTimeout函数在延迟时间后执行，如果在延迟时间内触发了双击，则用if判断语句阻止双击事件的发生

<script setup>
const isOne = ref(false) // 判断是否有第一次点击
const isTwo = ref(false) // 判断是否有第二次点击
const delayTime = ref(300) // 单击事件的延迟时间，同时是双击的判断阈值
const clickJudge = () => {
    if (!isOne.value){
        // 如果是第一次点击
        isTwo.value = false // 重置双击判断函数
        isOne.value = true
        setTimeout(() => {
            // 如果延迟函数期间执行了第二次点击 则不执行单击事件
            if (!isTwo.value){
                OneClick()
                isOne.value = false
            }
        }, delayTime.value)
    }else{
        //  如果已经有第一次点击了 接下来便是第二次点击
        isTwo.value = true
        TwoClick()
        // 双击执行完之后 需要重置判断属性
        isOne.value = false // 重置单击判断函数
    }
}
const OneClick = () =>{
    // 单击事件代码
    console.log('我被单击了');
}
const TwoClick = () =>{
    // 双击事件代码
    console.log('我被双击了');
}
</script>

需要注意：isTwo变量的重置需放在第一次点击事件的开头，否则后续触发双击事件时，单击事件也会被触发

连击事件实现思路：

        连击事件只需在双击事件的基础上将isOne = false放到一个定时函数中，触发双击时清空定时器并重新计时即可

const isOne = ref(false) // 判断是否有第一次点击
const isTwo = ref(false) // 判断是否有第二次点击
const delayTime = ref(300) // 单击事件的延迟时间，同时是双击的判断阈值
const timeId = ref(null) // 新增定时器函数
const clickJudge = () => {
    if (!isOne.value){
        isTwo.value = false
        isOne.value = true
        // 如果是第一次点击
        setTimeout(() => {
            if (!isTwo.value){
                // 如果早延迟函数期间执行了第二次点击 则不执行单击事件
                OneClick()
                isOne.value = false
            }
        }, delayTime.value)
    }else{
        //  如果已经有第一次点击了 接下来便是第二次点击
        isTwo.value = true
        BatterClick()
        if (timeId.value){
            clearInterval(timeId.value)
        }
        timeId.value = setTimeout(() => {
            isOne.value = false // 这个被挪到了这里
            timeId.value = null // 最后将定时器清空为null 否则会保存数字
        }, delayTime.value)
    }
}
const OneClick = () =>{
    // 单击事件代码
    console.log('我被单击了');
    
}
const BatterClick = () =>{
    // 双击事件代码
    console.log('我被连击了');
}