截流函数
函数截流:指连续触发事件但是在 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)
}
}
深度拷贝
相似用法
- Object.assign({},o) 浅拷贝
- JSON.parse(JSON.stringify(o)) 效率低
/**
* @template T
* @param {T} o
* @returns {T}
*/
function deepClone(o) {
if (o == null) return o;
if (Array.isArray(o)) {
var s = [];
for (var i = 0; i < o.length; i++) {
s.push(deepClone(o[i]));
}
return s;
}
if (typeof o === "object") {
var s = {};
for (var k in o) {
if (k[0] != "_" && typeof o[k] != "function") s[k] = deepClone(o[k]);
}
return s;
}
return o;s
}