相同点:
一个高频触发的函数,规定的时间内,函数防抖和函数节流都是用来对函数的调用做降频(降低单位时间内被调用的次数)处理的。
不同点:
函数防抖是执行最后一次事件,如下:点赞事件是最后一次点赞后三秒后打印输出,不论之前点击事件是否超过三秒,规定的时间是提供最后一次事件调用的时间。
函数节流是执行最先触发的事件,后面的不执行。规定时间是指,每一个规定时间最开始时,触发一次事件。下面代码每3秒触发一次屏幕滚动事件。
函数防抖
定义:一个高频触发的函数,在规定时间内,只让最后一次事件执行
应用场景:
1、频繁点赞和取消点赞,只读取最后一次的操作
2、搜索内容时,用户在不断的输入值时,用防抖来节约请求资源。
代码实现:
var btn = document.querySelector('button');
btn.onclick = function () {
console.log('不防抖,点击触发');
}
function deb(fn,delay) {
var time = null;
// 使用闭包
return function () {
clearTimeout(time);
time = setTimeout(() => {
fn()
}, delay);
}
}
// 只会执行一次,最后一次执行
btn.onclick =deb(function () { console.log('防抖,点击事件执行了')
},3000)
函数节流:
定义:一个高频触发的函数,在规定时间内,只执行最先触发的事件,后面的不执行
使用场景:
1、onscroll(屏幕滚动触发滚动事件),
2、onresize(窗口大小调整事件)
代码实现:
function throttle(fn,delay){
var lastTime = 0;
// 使用闭包
return function () {
var nowTime = Date.now();
if (nowTime-lastTime>delay) {
fn()
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function () {
console.log("scroll执行了" + Date.now());
},3000)
函数珂里化
把接收的多个参数的函数变换成接收一个单一参数的函数。高阶函数的一个特殊用法。