javascript 节流函数与消抖函数解析

2shou 发布于2019-08-22 15:04 / 556人阅读

摘要：绑定函数运行上下文传入函数参数测试函数节流函数什么是节流函数，类似与消抖函数但是不是仅仅有一个时间而已，还有一个最大时间当超过这个事件就必须触发。

消抖函数：

什么是消抖函数，说一个自己应用的实例：
自己在做一个项目里，有一个需要监听 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, 事件就必须触发。这个主要用于对滚动轴事件的优化。想想用户一直操作鼠标滚轮，不可能一直按照消抖函数那样，一直不触发滚动事件相应的处理逻辑吧。
实例demo

 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 源码解析。。。

GPU云服务器云服务器函数节流 js函数节流 javascript 函数 javascript函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93137.html

js中函数节流&函数去抖

摘要：节流保证在一定时间内，只能触发一次。我们在尝试一下去抖消抖，消除抖动，感觉这个更好听有没有什么现成的上的一次发现源码的经历以及对学术界拿来主义的思考函数节流和函数去抖应用场景辨析函数去抖的实现开篇先提几个问题？ 1.做搜索框的时候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就触发？是滚一段距离触发一次？还是滚一圈触发一次？还是滚...

王军 2019-08-22 10:42 评论0 收藏0
我对js函数闭包的理解

摘要：第三个是在里的由于在匿名函数妈妈的肚子里，但是也是个独立的个体，，当运行时，发现函数里用的声明，就不用再进一步去匿名函数妈妈肚子里去找了。直接就输出第四个是在里，但是没有的声明所以当运行时，就去匿名函数妈妈的肚子里去找，果然找到了。个人理解，请大家指正个人理解闭包作用：闭包可以用来隔离作用域（简单来说可以隔离环境变量、函数...etc）,也就是说一般情况下函数里申明的变量不...

testHs 2019-08-22 15:54 评论0 收藏0
工作中常用的npm包

摘要：工具类工具库，封装了处理，，，等常见的函数，是对标准库的补充。业务开发中常用的函数有很多，如等。示例如下整数处理保留两位小数百分比处理亿亿处理万万处理格式化数字大于亿的展示为亿，大于万的展示为万亿万时间处理库。工具类 lodash 工具库，封装了处理arrays，numbers，objects，string等常见的函数，是对标准库的补充。业务开发中常用的函数有很多，如：assign,...

ermaoL 2019-08-23 18:02 评论0 收藏0
JavaScript防抖和节流

摘要：概念函数防抖和函数节流，两者都是优化高频率执行代码的一种手段。防抖任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流指定时间间隔内只会执行一次任务一定时间内方法只跑一次。概念函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流：指定时间间隔内只会执行一次任...

DevWiki 2019-08-23 17:09 评论0 收藏0
前端面试题（4）JavaScript

摘要：变量声明提升在中，函数声明与变量声明经常被引擎隐式地提升到当前作用域的顶部。对象的方法和属性是在全局范围内有效的。未形成标准，实现混乱。前端面试题JavaScript（一） JavaScript的组成 JavaScript 由以下三部分组成： ECMAScript（核心）：JavaScript 语言基础 DOM（文档对象模型）：规定了访问HTML和XML的接口 BOM（浏览器对...

1treeS 2019-08-29 15:37 评论0 收藏0