js 防抖和节流
lodash
里面有封装好的现成的方法,可以直接拿来用,下面是自己的实现
防抖函数
/**
* @desc 函数防抖 “立即执行版本” 和 “非立即执行版本” 的组合版本
* @param func 需要执行的函数
* @param wait 延迟执行时间(毫秒)
* @param immediate true表示立即执行 false表示非立即执行 默认false
**/
function debounce(func, wait, immediate = false) {
let timer;
// 这里用到了闭包,timer本来在debounde函数执行完毕的时候就会被销毁
// 但是下面return的代码中使用了timer,因此不会被销毁,被保留了下来
return function (...args) {
if (timer) clearTimeout(timer);
if (immediate) {
var callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait)
if (callNow) func.apply(this, args)
} else {
timer = setTimeout(() => {
func.apply(this, args) // 这里要修改this指向,否则this指向的不是时间出发对象,而是window
}, wait);
}
}
}
节流函数
/**
* @desc 函数节流 “立即执行版本” 和 “非立即执行版本” 的组合版本
* @param func 需要执行的函数
* @param wait 延迟执行毫秒数
* @param immediate true表示立即执行 false表示非立即执行 默认false
*/
function throttle(func, wait, immediate = false) {
if (immediate) {
var previous = 0;
} else {
var timeout;
}
return function () {
let args = arguments;
if (immediate) {
let now = Date.now();
if (now - previous > wait) {
func.apply(this, args);
previous = now;
}
} else {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(this, args)
}, wait)
}
}
}
}
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 289211569@qq.com