文章目录
- 前言
- 一、防抖(debounce)
- 1、什么是防抖?
- 2、防抖实现
- 二、节流(throttle)
- 1.什么是节流?
- 2.节流实现
- 总结
前言
随着前端飞速的发展,用户体验也越来越重要。大家在逛一些网站时,会不会手贱,去疯狂的点击某个按钮,但是做了后却发现,网站都是,你点归你点,我动算我输。这其实就是因为做了防抖节流操作啦,为什么这两个东西这么神奇呢?让我们一起探究一下吧。
一、防抖(debounce)
1、什么是防抖?
通俗来说就是当一个事件一直处于频繁触发的情况下,禁止触发,直到频率降低到规定的程度,才允许触发。
效果:短时间内多次触发,最终在停止触发后的某个指定时间执行一次函数-----只执行一次
2、防抖实现
思路:
- 触发事件时,给一个setTimeout定时器来延迟触发
- 每次点击清除并重置定时器
- 使用闭包来存储定时器
代码:
// 防抖
const debounce = (fn, time) => {
let timeout = null
return function() {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, arguments)
}, time);
}
}
纸上谈兵都是扯淡,接下来让我们测试一下效果:
const input = () => console.log("111");
// 在1000ms也就是1s内连续移动都不会触发事件
div.addEventListener('mousemove', debounce(input, 1000))
效果图:
可以发现我鼠标在移动时一直没有触发事件,直到停止后才触发
二、节流(throttle)
1.什么是节流?
通俗的来说就是一个事件不停的触发时,控制它在每个时间段只触发一次。
效果:短时间内多次触发,即使触发仍在继续也可以根据指定时间触发一次函数----至少执行一次。
2.节流实现
思路:
- 设置一个变量,限制为true才能进入函数,进入后变为false。
- 设置setTimeout定时器在规定时间后才能进入执行函数再次触发。
- 使用闭包存储变量
代码:
const throttle = (fn, time) => {
let flag = true;
return function () {
if (!flag) return;
flag = false;
fn.apply(this, arguments);
setTimeout(() => {
flag = true;
}, time);
};
};
让我们来测试一下
const input = () => console.log("111");
div.addEventListener("mousemove", throttle(input, 1000));
效果图:
可以看到我鼠标在移动时先触发了一次事件,随后每过1s才再次触发一次事件。
总结
本次的演示就在这啦,思路是非常简单的,希望大家都能动手去敲一敲哟!