防抖函数

  • 返回function函数防反跳版本,将延迟函数执行(真正的执行)在函数最后一次调用时候的wait毫秒后。
  • 传参immediate为true,debounce会在wait时间间隔的开始调用这个函数。在类似不小心点了提交按钮两次的情况下很有用。
  • immediate为是否立即执行
/**
* 防抖函数
* @param fn   需要执行的函数
* @param wait   等待的时间
* @param immediate   是否立即执行
*/
const debounce = function(fn,wait,immediate){
    // 定义定时器和返回结果
    let timeout,result;
    //延迟执行方法
    const delay = function(fn,wait,...args){
        return setTimeout(()=>{
            return fn.apply(null,args);
        },wait);
    }
    //定时执行的方法
    const later = function(context,args){
        timeout = null;
        if(args) result = fn.apply(context,args);
    }

    // 防抖执行方法
    const debounced = function(args){
        // 如果有计时器,清除
        if(timeout) clearTimeout(timeout);
        // 如果立即执行
        if(immediate){
            // 获取是否立即执行函数
            let callNow = !timeout;
            timeout = setTimeout(later,wait);
            if(callNow) fn.apply(this,args);
        }
        else{
            timeout = delay(later,wait,this,args);
        }
    }

    // 取消函数
    debounced.cancel = function(){
        clearTimeout(timeout);
        timeout = null;
    }

    return debounced;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容