函数截流,防抖,柯理化,前端的基础,是每个公司必会问到的点。
函数截流:指连续触发事件但是在 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方法,就是利用的这个特性。
以上就是,函数的截流、防抖、柯理化的简单介绍,以及初步实现,面试的时候一定有用。