underScore专题-compose函数，节流函数，防抖函数

最新推荐文章于 2024-04-15 15:21:40 发布
最新推荐文章于 2024-04-15 15:21:40 发布
阅读量285 收藏
点赞数
分类专栏： underScore专题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41831345/article/details/106197617
版权

compose函数

从要实现的效果理解复合函数：

    var fun = _.compose(fun1, fun2, fun3)
    fun(1)

把多个函数组合为一个函数，依次调用参数，并把组合后的参数传递的参数，依次传递给每一个函数，1先传递给fun3然后再把处理结果传递给fun2，再把处理结果传递给fun1最后返回fun1的处理结果。

如果不实用compose函数，就需要像下面这种方式去调用，可读性比较差。

    function fun1(a) {
        return a + 1
    }
    function fun2(a) {
        return a * 2
    }
    function fun3(a) {
        return a - 1
    }
    var res = fun3(fun2(fun1(1)))
    console.log(res)

underScore内部compose函数的实现就很简单：

    function compose() {
        var args = arguments;
        var start = args.length - 1;
        return function() {
            var i = start;
            var result = args[start].apply(this, arguments);
            while (i--) result = args[i].call(this, result);
            return result;
        };
    }

获取传递的函数： 

 var args = arguments;

倒序调用的开始位置，从最后一个函数开始调用： 

var start = args.length - 1;

因为不知道调用fun的时候会传递几个参数进来，所以第一次调用的时候，会使用arguments去获取。

 var result = args[start].apply(this, arguments);

倒序执行函数：

 while (i--) result = args[i].call(this, result);

react中使用compose函数来增强redux

store中的compose函数：

    function compose() {
        var args = arguments;
        var funs = []
        for (var i = 0; i < args.length; i++) {
            funs[i] = args[i]
        }
        if (funs.length === 0) {
            return function(args) {
                return args
            }
        }
        if (funs.length === 1) {
            return function(args) {
                return funs[0](args)
            }
        }
        return funs.reduce(function(a, b) {
            return function() {
                return a(b.apply(this, arguments))
            }
        })
    }

节流函数

先来看看使用例子，给window添加一个滚动时间，内部有执行代码打印日志：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #root {
        height: 1000px;
        width: 100%;
    }
</style>

<body>
    <div id="root"></div>
</body>

<script src="underScore.js"></script>
<script>
    window.onscroll = function() {
        console.log('hello word')
    }
</script>

</html>

在页面滚动的过程中，这句话就一直在打印： 

换成节流函数：

    var throttle = _.throttle(function() {
        console.log('hello word')
    }, 3000)
    window.onscroll = throttle

滚动的时候不再一直打印，而是先立即执行一次，等待wait后再执行。每次操作触发很多次，但是函数都至少会调用两次。

可见，节流函数可降低函数执行的频率。

但是操作过程中会发现，只要第一次开始滚动，函数会立即执行一次，然后3s后再执行一次，说明这个节流函数默认调用了2次，第一次是立即执行，第二次是3s后执行。就像点击按钮去发送请求，通常会放一个节流函数，防止连续点击重复发送请求。一般会等待3s后再处理，而第一次请求都是希望点击立即去发送请求。

其实underScore中节流函数测参数有3个

    _.throttle(fun, wait, options)

fun：处理函数

wait：等待时间

options: {}，leading: false 阻止立即执行，等待wait后再去执行。trailing: fasle, 先立即执行，如果距离上一次差wait，再触发再立即执行。

这两个属性之间的差异很微小，需要好好理解。

leading: 每次操作，注意是每次操作，每次操作都会触发很多次节流函数。每次操作都不会立即执行，而是等待wait时间后再执行第一次。

 var throttle = _.throttle(function() {
        console.log('hello word')
    }, 3000, {leading: false})
    window.onscroll = throttle

trailing：每次操作，立即执行一次，等待wait后再执行，函数都至少会执行一次。

   var throttle = _.throttle(function() {
        console.log('hello word')
    }, 3000, {trailing: false})
    window.onscroll = throttle

 先来实现节流函数第一版：不考虑参数

    function throttle(fun, wait, options) {
        // 给一个初始值
        if(!options) options = {}
        var preTime = 0, timeout, result,args;
        function later() {
            preTime = new Date().valueOf();
            clearTimeout(timeout)
            timeout = null
            result = fun.apply(this,args);
        }
        return function() {
            args = Array.prototype.slice.apply(this, arguments);
            var nowTime = new Date().valueOf();
            // remaining<=0说明，时间差大于等于wait，可以触发函数了
            // remaining > 0，说明时间差小于wait 还不能触发，需要等待wait后再触发
            var remaining = wait - (nowTime - preTime)
            // 立即执行
            if(remaining <= 0) {
                if(timeout) {
                    clearTimeout(timeout)
                    // 释放内存
                    timeout = null;
                }
                preTime = nowTime;
                result = fun.apply(this,args);
                // 防止重复创建很多个timeout 延时执行
            } else if(!timeout){
                timeout = setTimeout(later, wait)
            }
            return result
        }
    }

起始preTime是0 remaining一定是小于0的，立即执行第一次，然后改变preTime的值，返回的函数再次调用，如果时间间隔小于wait，会走到else if再没有timeout的情况下，创建一个异步，等待执行，再次调用回调函数，如果时间间隔还是小于wait就什么也不做，wait时间到了以后，异步会执行。preTime也改变了，如果不改变这个值，这个时候remaining应该是小于0了，会再立即执行一次。 这是一个循环结束，这里timeout被清空，所以又会开始下一个循环。

第二版，options:

tranining:false,是立即执行，但是不会每次都执行两次，满足条件才会执行两次。

由上面的代码可以知道，之所以会每次操作都至少触发两次，是因为：

else if(!timeout){
       timeout = setTimeout(later, wait)
}

这句话在每次立即执行后，preTime发生改变，时间差小于0, timeout为null的时候都会创建一个异步任务。所以只需要在这里加一个判断就可以阻止这次执行。

else if(!timeout && options.traning !== false){
  timeout = setTimeout(later, wait)
 }

leading：false是阻止立即执行，改变时间差就可以阻止立即执行：

if (!previous && options.leading === false) previous = _now;

later中也需要做下调整：

previous = options.leading === false ? 0 : now();

所以完整的代码：

    function throttle(fun, wait, options) {
        // 给一个初始值
        if(!options) options = {}
        var preTime = 0, timeout, result,args;
        function later() {
            preTime = options.leading === false ? preTime = 0 : new Date().valueOf();
            clearTimeout(timeout)
            timeout = null
            result = fun.apply(this,args);
        }
        return function() {
            args = Array.prototype.slice.apply(this, arguments);
            var nowTime = new Date().valueOf();
            // 阻止立即执行
            if(!preTime && options.leading === false) preTime = now
            // remaining<=0说明，时间差大于等于wait，可以触发函数了
            // remaining > 0，说明时间差小于wait 还不能触发，需要等待wait后再触发
            var remaining = wait - (nowTime - preTime)
            if(remaining <= 0) {
                if(timeout) {
                    clearTimeout(timeout)
                    // 释放内存
                    timeout = null;
                }
                preTime = nowTime;
                result = fun.apply(this,args);
                // 释放内存
                if (!timeout) args = null;

                // 防止重复创建很多个timeout
            } else if(!timeout && options.trailing !== false){
                timeout = setTimeout(later, wait)
            }
            return result
        }
    }

 

防抖函数debounce

将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次），引入前辈的解释就是，你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行。

一个简单的防抖函数：

function debounce(fun, delay) {
    var timeout, content = this, args;
    function later() {
        fun.apply(content, args)
    }
    return function() {
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(later, delay)
    }
}

操作过程中创建的所有的timeout都被清除，只有最后一次执行的么有被🆑，所以会在delay后调用一次。

立即执行：

有时候我们又希望函数可控制的立即执行一次，然后再在触发停止后ns内执行一次。

function debounce(fun, delay, immediate) {
    var timeout, content = this, args, result;
    function later() {
        // 这里清空，immediate为true下次再触发的可以触发立即执行
        timeout = null
        result = fun.apply(content, args)
    }
    return function() {
        args = arguments;
        // 这里只是清除了定时器，但是timeout的值存在，并且在变化
        if (timeout) clearTimeout(timeout)
        console.log(timeout) // undefined 1 2 3 ...
        if(immediate) {
            var callNow = !timeout;
            if(callNow ) result = fun.apply(content, args)
            timeout = setTimeout(later, delay)
        } else {
            timeout = setTimeout(later, delay)
        }
        
       return result; 
    }
}

返回值：

如果fun 函数有返回值，就需要把返回值返回，不能让其丢失。所以用一个参数接受返回值，最后再返回。

 

麦乐乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈JavaScript函数节流
11-30
JavaScript函数节流是一种优化技术，主要用于控制频繁执行的函数，以避免过度消耗系统资源，特别是对于DOM操作和事件处理程序，如onresize、onscroll或ontouchmove等。当这些事件快速连续触发时，如果不加以控制，...
javaScript函数节流与防抖之区别
08-11
函数节流（throttle）和函数防抖（debounce）是JavaScript性能优化的重要技巧，它们主要用于处理频繁触发的事件，如窗口滚动、页面加载、输入框输入等场景。 **函数防抖（debounce）** 是一种策略，其主要目的是在...
跟着underscore学防抖
Leon的博客
03-24 283
防抖的原理就是： 你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐! 简单来说就是将多次执行变为最后一次执行。 // 这个是用来获取当前时间戳的 function now() { return +new Date() } ...
27. Compose快速点击防抖
u010436867的博客
03-25 833
很多场景都会处理快速点击事件的多次响应问题 @Composable fun DebouncedClickable(navCtrl: NavHostController, title: String) { val clicked = remember { mutableStateOf(false) } CommonToolbar(navCtrl, title) { Box( modifier = Modifier
在Jetpack Compose中优雅的使用防抖、节流
最新发布
Junerver的博客
04-15 942
本文中提及的use开头的函数，都出自与我的项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关系复杂的状态管理，专心于业务与UI组件。在Compose中使用useRequest轻松管理网络请求在Compose中使用状态提升？我提升个P…Provider在Compose中父组件如何调用子组件的函数？在Compose中方便的使用MVI思想？试试useReducer！在Compose中像使用redux一样轻松管理全局状态。
underscore 函数去抖的实现 #21
dz45693的专栏
10-12 1556
前文 我们对 JavaScript 中的函数节流和函数去抖的概念和应用场景进行了简单的了解，本文我们来深入探究下函数去抖的实现。（不懂函数去抖概念的建议看下前文 JavaScript 函数节流和函数去抖应用场景辨析 ） 我们以 scroll 事件为例，探究如何实现滚动一次窗口打印一个 hello world 字符串。 如果不对其进行节流或者去抖控制： window.onscr
【JavaScript专题】——— 防抖函数debounce，underscore的防抖源码分析
Share_Li_98的博客
08-01 560
防抖函数debounce，underscore的防抖源码分析
javascript函数式编程 underscore.js
01-17
JavaScript函数式编程是一种编程范式，它强调使用函数来组织代码，将计算视为一系列惰性求值...通过对压缩包中的"underscore-master"文件的探索，你可以看到源码实现，学习如何将这些函数式编程概念应用于实际项目中。
Javascript节流函数throttle和防抖函数debounce
01-18
问题的引出 　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器崩溃。 在这样的情况下，我们实际上的需求大多为...例如 jquery中有throttle和debounce插件， underscore.j
underscore--
05-14
1. **函数式编程支持**：underscore提供了map、reduce、filter、reject等函数，这些都是函数式编程中的基础操作，使得对数组和对象进行迭代、转换变得简单易行。 2. **集合操作**：它提供了如intersection（交集）...
跟underscore一起学防抖与节流
weixin_34272308的博客
04-21 343
前言 节流(throttle)和防抖(debounce)是网页性能优化的手段之一，也是大家在开发过程中经常忽视的点。面试也经常会被问，同时是前端进阶重要的知识点。 本文从概述，实现和源码三个部分着手，由浅入深的给大家分析和讲解节流和防抖的原理及实现，使读者能够明白其中原理并能够手写出相关代码。 概述 在解释防抖（debounce）和节流（throttle）之前，我们来看一下下面的例子 此处是被...
常用高阶函数：柯里化、Compose与Pipe、防抖、节流
加强前端基础
05-06 375
常用高阶函数：柯里化、Compose与Pipe、防抖、节流
underscore入门学习示例
龙旗飘扬的舰队
01-13 270
目录 underscore简介 工具函数（Utility） 对象函数（Object Functions） 函数（Functions） 数组函数（Array Functions） 集合函数（Collections） 链式语法(Chaining) 参考文档 underscore简介 意为下划线 它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象 它弥补了 jQ...
20230506----重返学习-嵌套循环返回相同结构对象-转成链式compose组合聚合函数-柯里化函数-面向对象梳理-重写new方法-鸭式变形-jQuery源码-模块管理的工具
seetoyou的博客
05-07 58
新的执行上下文作用域链函数私有作用域。
react中的compose()
大路宽宽的博客
12-22 629
首先来看reduce方法() 这是一个数组的方法。 arr.reduce(callback[, initialValue]) callback执行数组中每个值的函数，包含四个参数： accumulator(累加器) currentValue(当前值) currentIndex可选（当前索引） array可选（数组） initialValue可选（初始值） 直接看代码吧 var sum = [0, 1, 2, 3].reduce(function (a, b) { return a
JS防抖函数debounce，underscore的防抖代码分析
weixin_41957432的博客
11-06 456
防抖大致意思是高频触发的函数，在一定的时间间隔内只会执行一次。主要用来处理窗口的resize，滑动，滚动，输入等高频事件，也可以处理防止恶意高频点击按钮。 简易版防抖 const d = function(fn, wait){ let timeout = null return function(){ clearTimeout(timeout) let args = arguments timeout = se.
开源 | 如何写一个好用的 JetPack Compose 状态页组件
petterp的博客
11-04 559
引言 世界很大，也很小，组件很多，也很少。 关于开发中常见的状态页组件，我们已经见了很多，但是在 JetPack Compose 中该如何去写呢？虽然也有大佬写了相关demo ,但是如果要应用到实际中，不免有些捉襟见肘 。 本篇要解决的就是如何定制一个符合 实际开发 的状态页工具，并分析具体原理与设计思路。 效果图 这个效果图很简单，就是普通的一个状态页，所以也没什么值得说的，我们接下来分析一下，如果要实现一个状态页组件，需要有哪些基础功能。 需求分析 支持 compose 与 view 分层设计，按需
React-redux之compose
Alecor的博客
11-19 669
1
map-underscore-to-camel-case无效
09-21
在很多编程语言中，map-underscore-to-camel-case是一种常见的命名规则，它将下划线连接的单词转换为驼峰式命名，例如将my_variable_name转换为myVariableName。如果这种命名规则无效，可能是由于代码实现或使用方式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值