防抖(debounce
)和节流(throttle
)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似不相同,基本思想都是某些代码不可以在没有间断的情况下连续重复执行
如果一个事件被频繁执行多次,并且触发的时间间隔过短,则防抖函数可以使得对应的事件处理函数,只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。
如果一个事件被频繁触发多次,节流函数可以按照固定的频率去执行相应的事件处理方法。函数节流保证一个事件一定事件内只能执行一次。
类型 | 场景 |
---|---|
1、搜索框输入(只需要最后一次输入完成后再放松Ajax请求) | |
函数防抖 | 2、滚动事件scroll (只需要执行触发后的最后一次滚动事件的处理程序) |
3、文本输入的验证(连续输入文字后发送Ajax请求进行验证,停止输入后验证一次) | |
1、DOM 元素的拖拽功能实现(mousemove ) |
|
函数节流 | 2、游戏中的刷新率 |
3、Canvas 画笔功能 |
总的来说,函数防抖适合多次事件一次响应的情况,函数节流适合大量事件按照时间做平均分配触发
function debounce(fn, wait) {
var timer = null;
// 返回函数对debounce作用域形成闭包
return function () {
var context = this
var args = arguments
if (timer) {
// 事件被触发,清除timer并重新开始计时
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
var fn = function () {
console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发,之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次(把函数防抖看出技能读条,如果读条没完成就用技能,便会失败而且重新读条)
1、第一次调用函数的时候创建了一个定时器,在指定的时间之后运行代码
2、当第二次调用该函数的时候,会清除前一次的定时器并设置另一个
3、如果前一个定时器已经执行过了,这个操作就没有任何意义
4、当前一个定时器没有执行的时候,就是将他替换成一个新的定时器
5、目的是只有在执行函数的请求停止了
wait
时间之后才执行
// fn 是需要执行的函数
// wait 是时间间隔
const throttle = (fn, wait = 50) => {
// 上一次执行 fn 的时间
let previous = 0
// 将 throttle 处理结果当作函数返回
return function(...args) {
// 获取当前时间,转换成时间戳,单位毫秒
let now = +new Date()
// 将当前时间和上一次执行函数的时间进行对比
// 大于等待时间就把 previous 设置为当前时间并执行函数 fn
if (now - previous > wait) {
previous = now
fn.apply(this, args)
}
}
}
// DEMO
// 执行 throttle 函数返回新函数
const betterFn = throttle(() => console.log('fn 函数执行了'), 1000)
// 每 10 毫秒执行一次 betterFn 函数,但是只有时间差大于 1000 时才会执行 fn
setInterval(betterFn, 10)
function throttle(fn, threshold, scope) {
let timer;
return function () {
let context = scope || this, args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, threshold)
}
}
}
scroll
事件)
<style>
.wrap {
width: 200px;
height: 330px;
margin: 50px;
margin-top: 200px;
position: relative;
float: left;
}
.header {
width: 100%;
height: 30px;
background-color: #a8d4f4;
text-align: center;
line-height: 30px;
}
.container {
background-color: darkseagreen;
box-sizing: content-box;
width: 200px;
height: 300px;
overflow: scroll;
position: relative;
}
.content {
width: 140px;
height: 800px;
margin: auto;
background-color: cadetblue;
}
style>
<body>
<div class="wrap">
<div class="header">滚动事件:普通div>
<div class="container">
<div class="content">div>
div>
div>
<div class="wrap">
<div class="header">滚动事件:<strong>加了函数防抖strong>div>
<div class="container">
<div class="content">div>
div>
div>
<div class="wrap">
<div class="header">滚动事件:<strong>加了函数节流strong>div>
<div class="container">
<div class="content">div>
div>
div>
body>
let els = document.getElementsByClassName('container');
let count1 = 0,
count2 = 0,
count3 = 0;
const THRESHOLD = 200;
els[0].addEventListener('scroll', function handle() {
console.log('普通滚动事件!count1=', ++count1);
});
els[1].addEventListener('scroll', debounce(function handle() {
console.log('执行滚动事件!(函数防抖) count2=', ++count2);
}, THRESHOLD));
els[2].addEventListener('scroll', throttle(function handle() {
console.log(Date.now(), ', 执行滚动事件!(函数节流) count3=', ++count3);
}, THRESHOLD));
// 函数防抖
function debounce(fn, delay, scope) {
let timer = null;
let count = 1;
return function () {
let context = scope || this,
args = arguments;
clearTimeout(timer);
console.log(Date.now(), ", 触发第", count++, "次滚动事件!");
timer = setTimeout(function () {
fn.apply(context, args);
console.log(Date.now(), ", 可见只有当高频事件停止,最后一次事件触发的超时调用才能在delay时间后执行!");
}, delay);
}
}
// 函数节流
function throttle(fn, threshold, scope) {
let timer;
let prev = Date.now();
return function () {
let context = scope || this,
args = arguments;
let now = Date.now();
if (now - prev > threshold) {
prev = now;
fn.apply(context, args);
}
}
}