博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 节流函数 与 消抖 函数 解析
阅读量:6692 次
发布时间:2019-06-25

本文共 1522 字,大约阅读时间需要 5 分钟。

消抖函数:

什么是消抖函数, 说一个自己应用的实例:

自己在做一个 项目里, 有一个需要监听 input 元素(oninput 、 onchange), 只要 它的value 变,就需要去 向服务器拉取数据。
不做优化的, 用户对值进行操作时, 都向服务器端 拉去数据。
例如: 事件A: 用户查询的内容为 5个字,那么这个操作, 就会向服务器 请求 5次数据。
消抖就是定一个固定的t时间,延迟t时间后触发请求服务器数据。
如果在t内,用户继续输入了文字。 清除上一个定时器, 重新开一个延迟为t的定时器。否则 直接触发 请求服务器数据的操作。这样对于 事件A 来说,选取合适的t, 最少只需要一次请求服务器数据。

function debouce (fn, time, ctx) {    var k = null    function exec (args) {        // 绑定 函数运行上下文(this) && 传入函数参数        fn.apply(ctx || null, args)        k = null    }    return function () {         var args = arguments         k !== null && clearTimeout(k)         k = setTimeout(function () {exec(args)}, time)    }}//测试函数var test = debouce(function() {console.log(this);console.log(arguments)}, 3000, {a: 1})

节流函数

什么是节流函数, 类似与消抖函数,但是,不是仅仅有一个时间t而已, 还有一个

最大时间 maxLog. 当超过这个maxLog, 事件就必须触发。 这个主要用于对 滚动轴事件的优化。 想想用户 一直操作 鼠标滚轮,不可能一直按照消抖函数那样,一直不触发滚动事件相应的处理逻辑吧。

var thrFn  = function (fn, time, maxLog) {                var timeK = null                //                 var oTime = (new Date()).getTime()                var execFn = function () {                    fn()                    oTime = (new Date()).getTime()                }                return function () {                    var nTime = (new Date()).getTime()                    clearTimeout(timeK)                    if (nTime - oTime > maxLog) {                        execFn()                    } else {                        timeK = setTimeout(execFn, time)                    }                }    }

个人理解,不对之处, 请大家指正。

下一文, 准备 reudx 源码解析。。。

转载地址:http://abeao.baihongyu.com/

你可能感兴趣的文章
「APIO2018」选圆圈
查看>>
单例模式的那些事
查看>>
Canvas - 时钟绘制
查看>>
linux-vsftp
查看>>
modelsim 中如何加载多个对比波形文件
查看>>
Linux内核抢占与中断返回【转】
查看>>
Linux 文件操作监控inotify功能及实现原理【转】
查看>>
环形缓冲区-模仿linux kfifo【转】
查看>>
linux arm的存储分布那些事之一
查看>>
Spring下redis的配置
查看>>
vs2010在进行数据架构比较时报'text lines should not be null'错误
查看>>
13th_july_scrapy-splash
查看>>
新浪招聘的图片滚动控制JS效果
查看>>
java 汉字转拼音 PinYin4j
查看>>
C# 操作地址 从内存中读取写入数据(初级)
查看>>
栅格那点儿事(四A)---栅格的显示与渲染
查看>>
win下实现Linux的tab自动补全
查看>>
2017 3月22日
查看>>
机器学习笔记(Washington University)- Clustering Specialization-week five
查看>>
单链表的建立/测长/打印/删除/排序/逆序/寻找中间值
查看>>