美文网首页
高阶函数

高阶函数

作者: LoveBugs_King | 来源:发表于2019-05-28 15:38 被阅读0次

    防抖(debounce):

    非立即执行版本
    描述:
    触发事件func后设置定时器setTime1在n秒后执行事件func,如果在n秒内又触发了事件func,则会去掉上一个定时器setTime1,重新设定一个定时器setTime2在n秒后执行事件func。
    适用场景:
    1、搜索框,内容变化去发送请求,不希望内容一变化就去发送请求,而是变化后等一等,没有再变化时发送请求。
    2、滚动,不希望一滚动就去执行,等一等,没有再滚动再去执行。

    export function debounce(func, delay) {
        let timer
        return function (...args) {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
              func.apply(this, args)
          }, delay)
        }
    }
    

    立即执行版(适合用在,避免按钮多次快速点击导致发多个请求的情况)
    描述:
    1、函数会立即执行,执行后的规定时间内,不允许再次执行,如果不等待规定时间就来再次执行了,则等待时间重新计时。
    适用场景:
    适用场景不多啊!!暂时想不出来,这个场景有点变态...

    export function debounce(func, delay) {
        let timer
        return function (...args) {
          let callNow = !timer;
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
              timer = null
          }, delay)
          if (callNow) func.apply(this, args)
        }
    }
    

    合并版

    export function debounce(func, delay, immediate) {
        let timer;
        return function (...args) {
            let callNow = !timer;
            if (timer) {clearTimeout(timer)}
            if(immediate) {
                if(callNow) func.apply(this, args);
                timer = setTimeout(() => {
                    timer = null
                }, delay)
            }esle{
              timer = setTimeout(function(){
                  func.apply(this, args)
              }, dalay)
            }
        }
    }
    

    节流(throttle)

    立即执行版
    描述:
    规定n秒内,某个方法只能被执行一次,且在一开始就执行,规定时间内再次进行,不会重新计时。
    适用场景:
    点击按钮,会发送api请求,快速多次点击,希望只触发第一次。
    export function throttle(func, delay){
    let timer;
    return function(...args) {
    if(!timer) {
    func.apply(this, args)
    timer = setTimeout(()=> {
    timer = null
    },delay)
    }
    }
    }

    非立即执行版
    描述:
    规定n秒内,某个方法只能被执行一次,且在n秒后执行,规定时间内再次进行,不会重新计时。
    适用场景:
    有延迟,但不会重新计时,适用场景不多。暂时没发现。

    export function throttle(func, delay) {
        let timer;
        return function(...args) {
            if(!timer) {
                timer = setTimeout(() => {
                    timer = null
                    func.apply(this, args);
                }, delay)
            }
        }
    }
    

    柯里化

        在一个函数中首先填充几个参数(然后再返回一个新函数)的技术称为柯里化(Currying)。听起来跟Function.prototype.bind作用一样填入几个参数返回一个新函数。
    
        在很多文章中写到:柯里化通常也称**部分求值**,其含义是**给函数分步传递参数**,**每次传递参数后部分应用参数**,**并返回一个更具体的函接收剩下的参数**,**这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果**。
    

    柯里化简单实现:

    问题 :要实现一个这样的加法函数,使得:

    image
        这个函数,只有当参数为空时,才执行运算。当有参数时(比如add(1,2,3)),返回的是一个函数,这个函数储存了1,2,3但没有执行加法(执行了也行,此处假设不执行,只起到保存参数作用)。
    
        要实现这样一个函数,在参数不为空时,必定返回一个函数,该函数还保存了之前的参数,这就是闭包呀!
    
    image
        可以看出,**函数柯里化的特点**:1、闭包把参数长久持有,不被垃圾回收器回收。2、函数递归,在传参数情况下返回一个新函数给下一次调用而使用。
    

    通用函数对差异化函数进行柯里化实现:

        通用函数对差异化函数进行柯里化,假如我们有一段通用的逻辑代码,有一段差异化的逻辑代码(在不同情况下执行的操作不同)。为了不用每次对差异化代码进行差异判断执行,我们可以通过闭包把它持久化,用到函数柯里化。
    
    image

    柯里化的作用

    1、多次调用curry方法,只有第一次会去执行var args =..;接下来都是直接执行_func方法。也就是前面的逻辑可以复用,不再执行,提高性能。

    2、返回函数_func内的参数,比如args, _func都会因为闭包而不被垃圾回收器回收,长久持有,除了第一次,接下来执行_func方法,都不用再传入这些参数。

    2、利用柯里化的思想,可以自己写一个bind函数。

    相关文章

      网友评论

          本文标题:高阶函数

          本文链接:https://www.haomeiwen.com/subject/ndhdtctx.html