面试官说手写 ：防抖和节流

Posted 2022-02-28 咖啡壶子

首先介绍一下防抖和节流

防抖

是只会执行最后一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。比如英雄回城，搜索框。搜索框实现防抖，可以使用lodash中的debounce，在vue中使用watch监听，使用debounce把handler函数包裹起来，实现搜索框防抖功能，

防抖：
function debounce(fn,delay) 
    // 定义一个标识
    var flag = null
    return function() 
        // 如果已经有任务 ，就清空任务
        if (flag) 
            clearTimeout(flag)
        
        flag = setTimeOut(() =>  
            fn.call(this)
        ,delay)
    

节流

就是在一段时间内执行完，才会再次执行下一次的函数。当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

节流
function throttle(fn, delay)  
    // 定义上一次函数执行的时间
    var lastTime = 0
    return function() 
        var nowTime = new Date().getTime()
        // 当前时间减去上一次执行时间大于这个指定的时间间隔才让他出发这个函数
        if (nowTime - lastTime > delay) 
            fn.call(this)
            // 同步时间 
            lastTime =NowTime
        
    

总结： 防抖可以应用到搜索框中，但是在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。