函数防抖和节流

栏目: IT技术 · 发布时间: 4年前

内容简介:函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了。表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单。仅在用户不点击之后,把最后一次的点击操作执行即可。

函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。

防抖使用场景:

  • 表单输入框校验
  • 提交按钮避免重复提交

节流使用场景:

  • scroll,mousemove,resize等

函数防抖(debounce)

表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了。

表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单。仅在用户不点击之后,把最后一次的点击操作执行即可。

防抖函数的适用场景都有一个共同特点,就是高频触发并不会立即高频的执行,只有在结束高频触发一定时间间隔之后,执行最后一次触发。

代码实现就很简单了,短时间高频触发则重置计时器,计时器到达指定时间后,方才执行回调函数

var debounce = function (func, wait) {
    var timer;
    return function () {
        var self = this, args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
            func.apply(self, args);
        }, wait);
    }
}
/**
这里使用闭包是为了保存计时器,而不是定义一个全局变量来存放计时器。apply的作用则是为了处理this指向和参数的传递,因为setTimeout会将this指向window。
*/

函数节流(throttle)

在触发频率很高的场景中,通常并不需要以同样的高频来执行回调函数,这时候需要人为的控制回调函数执行频率,以一个固定的较低频率来执行。

实现原理是,记录第一次触发时间,之后每次触发都对比是否到达指定的间隔时间,只有大于等于指定间隔才会再次执行,并重新开始记录触发时间。

可以用时间戳记录并计算出时间间隔,同样也可以用计时器来控制时间间隔。

var throttle = function (func, wait) {
    var timer;
    return function () {
        var self = this, args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                func.apply(self, args)
                clearTimeout(timer)
                timer = null;
            }, wait)
        }
    }
}

最后用一张图来对比防抖和节流函数的执行的频率, 可视化实现

函数防抖和节流

参考文档

函数防抖与函数节流-司徒正美


以上所述就是小编给大家介绍的《函数防抖和节流》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Visual C# 2008入门经典

Visual C# 2008入门经典

James Foxall / 张劼 / 人民邮电出版社 / 2009-6 / 39.00元

《Visual C#2008入门经典》分为五部分,共24章。第一部分介绍了Visual C# 2008速成版开发环境,引导读者熟练使用该IDE;第二部分探讨如何创建应用程序界面,包含窗体和各种控件的用法;第三部分介绍了编程技术,包括编写和调用方法、处理数值、字符串和日期、决策和循环结构、代码调试、类和对象的创建以及图形绘制等;第四部分阐述了文件和注册表的处理、数据库的使用和自动化其他应用程序等;第......一起来看看 《Visual C# 2008入门经典》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具