高阶函数（2）

红太狼 2022-06-07 12:28 236阅读 0赞

### 函数节流 ###

函数的触发不是由用户控制的，有可能频繁触发，就会造成性能问题，如：window.onresize事件，mousemove,上传进度。节流的代码实现由很多种，下面运用setTimeout来延迟一段事件执行。

var throttle = function(fn,interval){ 
                var __self = fn,//保存需要被延迟执行的函数
                timer,
                firstTime = true;
    
                return function(){ 
                    var args = arguments;
                    __me = this;
                    if(firstTime){
       //如果是第一次调用，不需要延迟
                        __self.apply(__me,args);
                        return firstTime = false;
                    }
                    if(timer){
       //如果定时器还在，说明前一次延迟执行还没有完成
                        return false;
                    }
                    timer  = setTimeout(function(){ //延迟一段时间
                        clearTimeout(timer);
                        timer = null;
                        __self.apply(__me,args)
    
                    },interval || 500)
                }
            }
            window.onresize = throttle(function(){ 
                console.log(1)
            },500)
            //throttle传入两个参数，一个是需要延迟执行的函数，一个是延迟时间。

### 分时函数 ###

1秒内向页面插入1000个dom节点，页面很可能会卡顿。解决的办法就是把1s创建1000个改为200ms创建8个。使用timeChunk函数示例如下:

var timeChunk = function(ary,fn,count){ 
                var obj,
                    t;
                var len = ary.length;
                var start = function(){ 
                    for(var i=0;i<Math.min( count || 1,ary.length);i++ ){
                        var obj = ary.shift();
                        fn(obj)
                    }
                }
                return function(){ 
                    t = setInterval(function(){ 
                        if(ary.length === 0){
       //如果全部节点已经创建好
                            return clearInterval(t);
                        }
                        start();
                    },200)//分批执行时间间隔
                }
            }
            var ary = [];
            for(var i = 1;i<=1000;i++){
                ary.push(i);
            }
            var render = timeChunk(ary,function(n){ 
                var div = document.createComment('div');
                div.innerHTML = n;
                document.body.appendChild(div);
            },8)
            render()

### 惰性加载 ###

进入条件分支时，addEvent函数会被重写，下一次进入addEvent时,不在执行里面的分支语句:

var addEvent = function(elem,type,handler){ 
                if(window.addEventListener){
                    addEvent = function(elem,type,handler){ 
                        elem.addEventListener(type,handler,false)
                    }
                }else if(window.attachEvent){
                    addEvent = function(elem,type,handler){ 
                        elem.attachEvent('on'+type,handler)
                    }
                }
                addEvent(elem,type,handler)
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关高阶函数

高阶函数是接受函数作为参数并且/或者返回函数作为输出的函数. 函数作为参数传递是JavaScript规范的一部分.JavaScript作为一门语言将函数作为数据,允许函数替代

男娘i/ 2023年07月06日 06:10/ 0 赞/ 22 阅读

相关 js高阶函数

> 高阶函数？两种应用方式可称之为高阶函数 1. 函数内部返回一个函数，外层函数可以叫做高阶函数 function A() {

末蓝、/ 2022年08月28日 14:49/ 0 赞/ 178 阅读

相关高阶函数（一）

> 原文链接：[https://github.com/enbandari/Kotlin-Tutorials][https_github.com_enbandari_Kotlin

电玩女神/ 2022年06月08日 10:56/ 0 赞/ 302 阅读

相关 Scala 高阶函数

Scala 高阶函数 Scala混合了面向对象和函数式的特性。在函数式编程语言中，函数是“头等公民”，可以像任何其他数据类型一样被传递和操作。每当你想要给算法传入明细动作

痛定思痛。/ 2022年06月08日 00:20/ 0 赞/ 298 阅读

相关高阶函数（2）

函数节流函数的触发不是由用户控制的，有可能频繁触发，就会造成性能问题，如：window.onresize事件，mousemove,上传进度。节流的代码实现由很多

红太狼/ 2022年06月07日 12:28/ 0 赞/ 237 阅读

相关高阶函数(1)

高阶函数高阶函数至少满足以下条件：函数可以作为参数被传递函数可以作为返回值输出 JavaScript中高阶函数类型 1.回调函数

淩亂°似流年/ 2022年06月07日 12:10/ 0 赞/ 231 阅读

相关高阶函数（一）

1 什么是高阶函数 1.1 高阶函数的基本概念高阶函数其实看着挺吓人，不过就是把函数作为参数或者返回值的一类函数而已。其实这样的函数我们都见过很多了，来看个例子：

刺骨的言语ヽ痛彻心扉/ 2022年04月25日 07:24/ 0 赞/ 302 阅读

相关 scala高阶函数

1.作为值的函数 import scala.math._ object Test extends App { //scala中函数是头等

r囧r小猫/ 2021年12月13日 04:14/ 0 赞/ 371 阅读

相关了解高阶函数

JavaScript的函数其实都指向某个变量，既然变量可以指向函数，函数的参数能接受变量，那么一个函数就可以接收另一个函数作为参数这种函数就称为高阶

╰+哭是因爲堅強的太久メ/ 2021年10月24日 06:00/ 0 赞/ 389 阅读

相关高阶函数

百度百科的解释：在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数: ①接受一个或多个函数作为输入； ②输出一个函数第一个条件就是：函数作为参数传入

灰太狼/ 2021年08月19日 15:42/ 0 赞/ 498 阅读