专栏首页flytam之深入前端技术栈函数防抖和函数节流的简单实现和探讨

函数防抖和函数节流的简单实现和探讨

函数防抖和函数节流

函数防抖(debounce)

  • 通俗的说作用就是防止某个函数执行过于频繁。也就是说就是让某个函数在上一次执行后,满足等待某个时间内不再触发此函数后再执行,而在这个等待时间内再次触发此函数,等待时间会重新计算。
  • 应用场景
    • 例如某个resize事件,我们想resize触发时去执行某个函数,但是resize是在窗口不停拖动会不断触发的,而很多时候我们不必拖动过程中不停执行那个函数这样很消耗性能也没有必要。所以就需要一个防抖,设定一个时间间隔让它一定时间间隔后执行
    • 防止提交表单按钮被多次点击发送多次请求(这个需要对比上面做点小修改)
  • 实现
//没有考虑上下文和错误处理版本的防抖函数就如下而
/**
 * 
 * @param {function} func 执行的函数
 * @param {number} time 防抖的时间
 */
  const debounce = (func,time = 500) =>{
    let timeout;
    return () => {
        if (timeout) clearTimeout(timeout);
        setTimeout(func,time);
    }
}
const eventdo = debounce(some,1000);
element.onscroll = eventdo;

上面有个问题就是如果再场景2那种情况,用户提交数据请求是发不出去的。而且不停点击,请求就一直不发,这显然是不科学的,我们就要改进这个函数了。

/**
 *
 * @param {function} func 执行的函数
 * @param {boll} immediate 是否马上执行一遍
 * @param {number} time 防抖的时间
 */
 //简易版本防抖函数的实现
const debounce = (func, immediate = false, time = 500) => {
    let timeout,
        hasImmediate = immediate;
    let later = (args) => {
        timeout = null; //这里设为null是再马上需要调用一次那种情况用的。就是说如果执行了,就表示重新再来
        if (args) func(...args);
    }
    return (...args) => {
        if (timeout) 
            clearTimeout(timeout);
        if (immediate) {
            const callNow = !timeout; //马上执行一遍
            if (callNow) 
                func(...args);
            setTimeout(later,time);//防止疯狂点击,因为我们没有传参数给later,所以later函数的args是undefined,它里面也不会执行的

        } else {
            setTimeout(() =>later(args),time);

        }
    }
}

我们可见如果传入了immediate参数,这个防抖函数会马上执行一遍,在之后的time时间内,都不能点击,如果疯狂点击这个时间也不断延长。这样就实现了一个基本的防抖函数了。

函数节流(throttle)

  • 函数节流就是说一个固定的时间内,某个函数只会被执行一遍
/**
 * 
 * @param {function} func 执行的函数
 * @param {number} wait  节流时间
 */
 //简易版本节流函数的实现
const throttle = (func,wait) =>{
    let previous = 0;//记录函数上一次执行的时间
    return (...arg) =>{
        let now = Date.now();
        if (!previous) previous = now;
        let remaining = wait - (now - previous);//剩余时间
        if (remaining < 0 || remaining > wait){
            //超过了节流时间
            //执行函数
            func(...arg);
            previous = now;
        }
    }
}

函数节流和函数防抖都是利用了setTimeout的特性进行操作的,在优化函数频繁调用中十分有用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 两个配置修改,让你的webpack打包速度飞起来

    使用babel7并且使用@babel/preset-typescript代替ts-loader。一方面,babel7拥有着更快的速度,另一方面,ts-loade...

    flytam
  • 简析redux技术栈(一):redux中间件

    从上面可以看到,一个中间件函数要最后完成,需要再执行前经过两次的初始化(分别传入 store 和 next 方法),然后到最后的调用

    flytam
  • 深入Preact源码分析(三)Preact组件实例到DOM的过程

    从上节组件变成真实dom的过程中最重要的函数就是createComponent和setComponentProps。我们可以发现,在先后执行了createCom...

    flytam
  • swift之函数式编程

    最近初学swift,和OC比,发现语言更现代,也有了更多的特性。如何写好swift代码,也许,熟练使用新特性写出更优秀的代码,就是答案。今天先从大的方向谈谈sw...

    王大锤
  • 如何口述机器学习模型原理

    作者:Ricky翘 zhuanlan.zhihu.com/p/34128571 有时碰到跟别人聊起模型的熟悉时,不免要阐述下模型的原理,但一般口头交流都比较难...

    统计学家
  • 基础语法是学习python的关键一步,跟着案例学基础(献给初学者)

    Python 3.0 在设计的时候没有考虑向下兼容,同时官宣在2020年python2.0停止更新。

    机器思维研究院
  • ArcPY系列之四(概化)

    在数据处理中,经常需要对要素进行抽稀,在容差范围内,去除冗余节点。按照我的理解,这个过程可称之为:概化!

    数据处理与分析
  • 基于windows平台搭建elasticsearch

    elasticsearch-6.0.1.zip--https://www.elastic.co/downloads/elasticsearch

    陈珙
  • thinkphp自动加载机制

    PHP的自动加载机制个人感觉使用起来还是很方便的。关于PHP的自动加载机制,其核心的方法是__autoload()和spl_autoload_register(...

    公众号php_pachong
  • C++纯虚函数与抽象类

    为什么说虚函数是C++最重要的特性之一呢,因为虚函数承载着C++中动态联编的作用,也即多态,可以让程序在运行时选择合适的成员函数。虚函数必须是类的非静态成员函数...

    Dabelv

扫码关注云+社区

领取腾讯云代金券