防抖与节流

最新推荐文章于 2024-10-16 18:35:07 发布

每天只想发大财

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量142

点赞数

文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/Rewon_duang/article/details/129587801

版权

文章介绍了JavaScript中防抖(debounce)和节流(throttle)的概念及应用场景。防抖常用于搜索框输入事件，避免频繁调用处理函数，只执行最后一次。节流则适用于快速点击事件，确保一定时间内只执行一次函数。示例代码展示了如何手动实现这两种技术，并提到lodash库提供了封装好的函数。

摘要由CSDN通过智能技术生成

防抖：短时间内大量触发某一事件，每次触发都清除掉原来的计时器，重新计时，只执行最后一次触发。

应用场景：搜索框的输入

let timer = null
document.querySelector('opt').onKeyUp = function(){
    if(timer !== null){
        clearTimeout(timer)
    }
    timer =  setTimeout(()=>{
        console.log('hello world, debounce’)//这里写你要实现的功能
    },1000)
}

节流：短时间内大量触发某一事件，只执行一次

应用场景：快速点击

let timer = null
document.querySelector('opt').onmouseover = function(){
    if(timer !== null){
        return
    }
    timer =  setTimeout(()=>{
        console.log('hello world, throttle’)//这里写你要实现的功能
        timer = null
    },1000)
}

lodash库有封装好的的防抖与节流函数