js 函数节流与函数防抖技巧

最新推荐文章于 2024-02-26 16:03:19 发布

it浪子博客

最新推荐文章于 2024-02-26 16:03:19 发布

阅读量557

点赞数

分类专栏：前端文章标签：函数防抖函数节流防止表单重复提交

本文链接：https://blog.csdn.net/lsvtogergo/article/details/87877159

版权

本文介绍了JavaScript中的函数节流和防抖技术，详细阐述了它们的概念和应用场景。函数防抖用于限制在一定时间内只执行最后一次操作，例如搜索联想和表单提交防止重复。函数节流则确保在单位时间内仅执行一次操作，适用于滚动事件监听、页面底部自动加载和拖拽功能等场景。通过实例和图示，帮助理解这两种优化技术的差异和应用。

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

函数节流与函数防抖

一、函数防抖 `(debounce)`

概念

在事件被触发 n 秒后在执行某个操作, 如果在这 n 秒内再次被触发, 则重新计算时间；即多次动作只执行最后一次

1、举例： 如果有人进入电梯(事件被触发)，电梯将在10秒后出发，这时候又有人进入电梯(过了5秒，即10秒内再次触发该事件)，则电梯要重新等待10秒（重新计时，此时总共需要等待15秒）

2、实现

function debounce(fn, delay){
   
    // [delay]毫秒之后执行异步，若[delay]毫秒内多次触发重新计时
    return function(){
   
        var _this = this, args = arguments
        fn.timer && clearTimeout(fn.timer)
        
        fn.timer = setTimeout(()=>{
   
            fn.apply(_this, args)
        }, delay)
    }
}

// 实际执行的函数 模拟获取输入框的值异步校验
function ajax(value, isDebounce){
   
    console.log('异步验证唯一性 ', value, isDebounce? '防抖操作'