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

    技术2022-07-11  160

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

    函数截流:指连续触发事件但是在 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方法,就是利用的这个特性。

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

    Processed: 0.014, SQL: 9