Js节流与防抖

最新推荐文章于 2024-09-30 15:42:36 发布

哇哈哈哈啊~

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量154

点赞数

文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/cjp1223/article/details/128482326

版权

什么是节流？

节流就是指连续触发事件但是在设定的一段时间内中只执行一次函数。关键词：频率

例如：设定1000毫秒执行，那么你在1000毫秒多次触发，也只在1000毫秒后执行一次

代码实现

<button onclick='getData()'>点击请求数据</button>
<script>
    let timer = '' //设置变量存储定时器的计时
    function getData(){
        // 判断定时器是否有值 如果有值的话直接return 
        if(timer){
              return false
        }
        timer = setTimeout(()=>{
            console.log('发送了一个ajax请求...')
            timer = ''
        },1000)
    }
</script>

这样我们就完成了一个节流的操作

是不是很简单~

继续吧

什么是防抖？

防抖就是指连续触发事件但是在设定的时间内只执行最后一次。

例如：设定1000毫秒执行，当你触发事件，会在1000毫秒之后执行，但是在这1000毫秒之内你又重新触发了该事件，那么该事件会重新计时，1000毫秒之后执行。关键词：等待

还是上代码

<button onclick='getData()'>点击请求数据</button>
<script>
    let timer = '' //设置变量存储定时器的计时
    function getData(){
        // 判断定时器是否有值 如果有值 直接清空重新开启一个定时器
        if(timer){
              clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            console.log('发送了一个ajax请求...')
        },1000)
    }
</script>

这就是一个简单的防抖操作