自定义指令--防抖与节流

2024-05-06

防抖与节流

防抖

防抖是指控制请求发送的速度,一般就是在发送请求的之前加上延迟(但是点击多少下还是会发多少次请求)

节流

节流控制请求发送的次数(在给定时间内点击无数次也只发一次请求)

这两种方法都能在前端有效的去阻止请求过多

用自定义指令实现防抖与节流

手写防抖

app.directive('debounce', {
    mounted(el, binding){
        if(typeof binding.value.fn !== 'function' ||  !binding.value.event) return;
        let delay = 200
        el.timer = null
        el.handle = function (){
            if(el.timer){
                clearTimeout(el.timer)
                el.timer = null
            }
            el.timer = setTimeout(() => {
                binding.value.fn.apply(this,arguments)
                el.timer = null
            },binding.value.delay || delay)
        }
        el.addEventListener(binding.value.event,el.handle)
    },
    beforeUnmount(el, binding){
        el.removeEventListener(binding.value.event,el.handle) //卸载
}
})

使用案例

<script setup>
const handleClick = () => {
  console.log('防抖点击');
}
</script>
<template>
  <button v-debounce="{fn: handleClick, event: 'click', delay: 200}">点击试试</button>
</template>

手写节流

节流的代码只有一个地方不同,就是当当前DOM的el.timer具有计时器的时候,直接跳过不执行此次操作

1	if(el.timer) return;

至此,初步了解啦前端限流的方式,同时熟悉了自定义指令的使用QAQ

写于综合阅览室