本文摘自PHP中文网,作者hzc,侵删。
前言
函数防抖和节流,这个知识点面试中被问的概率比较高。
防抖
非立即执行版防抖可以理解为n时间后执行一次函数。立即执行版防抖是立即执行一次函数。
防抖的实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function debounce(func, wait, immediate) {
let timeout
return function () {
let context = this
let args = arguments
if (timeout) {
clearTimeout(timeout)
}
if (immediate) {
let callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) {
typeof func === 'function' && func.apply(context, args)
}
} else {
timeout = setTimeout(() => {
typeof func === 'function' && func.apply(context, args)
}, wait)
}
}
}
|
节流
节流可以理解为每隔n时间执行一次函数。
节流的实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function throttle(func, wait, type) {
let previous
let timeout
if (type) {
previous = 0
} else {
timeout
}
return function () {
let context = this
let args = arguments
if (type) {
let now = Date .now()
if (now - previous > wait) {
typeof func === 'function' && func.apply(context, args)
previous = now
}
} else {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null
typeof func === 'function' && func.apply(context, args)
}, wait)
}
}
}
}
|
防抖和节流的区别
用文本框输入文字来演示的话,假如时间都设置为1s,用户不断输入文字,如果是非立即执行防抖的话是停止输入1s后函数执行,只执行一次,如果是立即执行的防抖的话是立即函数执行,只执行一次。节流则是在用户输入期间,每隔一秒执行一次函数,可能会执行多次。
防抖和节流调用的区别
下面代码防抖函数和节流函数都调用了10000000次,但是防抖函数只会执行一次,可是节流函数就很多次了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let debounceCallback = debounce( function () {
console.log( 'debounceCallback' )
}, 1000, false)
for (let i = 0; i < 10000000; i++) {
debounceCallback()
}
let throttleCallback = throttle( function () {
console.log( 'throttleCallback' )
}, 1000, false)
for (let i = 0; i < 10000000; i++) {
throttleCallback()
}
|
推荐教程:《JS教程》
以上就是轻松理解函数防抖和节流的使用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript中的继承方式有哪些
深入分析ajax的进度事件(附示例)
vue-cli3.0安装与配置的方法教程(图文)
js怎样直接操作二进制数据
es6块级绑定中let and const的详细分析
javascript如何实现弹出层效果?(代码分析)
javascript三目运算符有哪些
javascript有没有求方程的库
javascript如何给元素添加自定义属性
javascript怎么设置月份
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 轻松理解函数防抖和节流的使用