JavaScript基础之函数截流、防抖、柯理化

函数截流，防抖，柯理化，前端的基础，是每个公司必会问到的点。

函数截流：指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思，会稀释函数的执行频率。

应用场景：例如，按钮被多次点击

实现的方式：

（1）定时器方式

let throttle = (fun, time) => {
    let timeout
    return function () {
        let self = this
        let args = arguments
        if (!timeout) {
            timeout = setTimeout(function () {
                timeout = null
                fun.apply(self, args)
            }, time)
        }
    }
}

(2)时间戳方式

let throttle = (fun, time) => {
    let pre = 0
    return function () {
        let now = Date.now()
        let self = this
        let args = arguments
        if (now -pre > time) {
            fun.apply(self, args)
            pre = now
        }
    }
}

函数防抖：短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

应用场景：在input输入框连续输入向后端发起请求

实现方式：

（1）非立即执行：非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

let debounce = (fun, time) => {
    let timer
    return function () {
        let self = this
        let args = arguments
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fun.apply(self, args)
        }, time)
    }
}

(2)立即执行：立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

let debounce = (fun, time) => {
    let timer
    return function () {
        let self = this
        let args = arguments
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            timer = null
        }, time)
        if (!timer) fun.apply(self, args)
    }
}

函数柯理化：柯理化就是将多参数的函数，转化为单一参数的函数；也就是说，一个多参数的函数，接收了全部的参数，那么就返回该函数的函数值，否则就返回一个柯理化的函数。

实现方式：

let curry = (fuc) => {
    let limit = fun.length
    let params = []
    return function _curry (...args) {
        if (limit <= params.length) {
            return fun.apply(null, params)
        }
        return _curry
    }
}

为什么要函数柯理化：

1、参数复用

原理就是利用闭包的原理，让上一步被传进来的参数不被释放掉，可以继续复用。

2、提前确认

提前判明一些情况，处理兼容性问题，比如addEventlistener这个方法并不是所有浏览器都可以使用，所以可以提前确认。

3、延迟加载

js中的bind方法，就是利用的这个特性。

以上就是，函数的截流、防抖、柯理化的简单介绍，以及初步实现，面试的时候一定有用。