js防抖节流
在日常中经常会用到
防抖 就是在连续多次触发同一个事件做的优化,最后只执行一次事件响应。
节流 就是在连续多次触发同一个事件做的优化,在一定间隔内做出的事件响应。
它们都是 防止多次点击触发多次从而产生不必要的响应
上代码
防抖
使用定时器防抖
//防抖debounce代码:
function debounce(fn, delay) { //传入要执行的函数和防抖事件间隔
if (typeof fn !== 'function') { //判断是否是函数
throw new TypeError('need a function arguments');
}
var timeout = null; // 创建一个标记用来存放定时器的返回值
return function(e) {
// 每当用户触发的时候把前一个 setTimeout clear 掉
clearTimeout(timeout);
// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发,就不会执行 fn 函数
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
// 处理函数
function handle() {
console.log('防抖:', Math.random());
}
//滚动事件
window.addEventListener('scroll', debounce(handle, 500));
节流
时间节流,判断时间是否大于节流时间执行函数,第一次默认执行
// 时间节流
function jieliu(func, delay) {
let pre = 0;
return function() {
let now = new Date()
let context = this
let args = arguments
if (now - pre > delay) {
func()
pre = now
}
}
}
// 监听窗口大小改变背景
function coloring() {
let r = Math.floor(Math.random() * 255)
let g = Math.floor(Math.random() * 255)
let b = Math.floor(Math.random() * 255)
document.body.style.background = `rgb(${r},${g},${b})`;
}
window.addEventListener('resize', jieliu(coloring, 2000));
定时器节流,判断定时器是否存在,执行成功后再间隔执行
//定时器
function dsqjl(func, delay) {
let st = null;
return function() {
if (!st) {
st = setTimeout(() => {
func()
st = null
}, delay)
}
}
}
window.addEventListener('resize', dsqjl(coloring, 2000));
是否使用apply,call根据需求