概念
函数防抖(debounce):
事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间;当预定时间内没有再次调用该函数,则执行响应逻辑。
函数节流(throttle):
可以理解为在函数防抖上多加了一个功能:函数节流会预定一个自动执行时间,到时自动执行一次。
共同点:
函数节流与函数防抖都是为了限制函数的执行频次,是一种性能优化的方案,比如应用于window对象的resize、scroll事件,拖拽时的mousemove事件,文字输入、自动完成的keyup事件。
举例
以百度搜索为例:用户搜索输入时,边输入会边提示搜索内容,如下:
从网络请求来看,百度是监听了键盘输入,按一次键就发一次请求,如下:
对于百度来说,这样自然没什么问题,毕竟服务器强大,这点消耗不算什么,但在我们看来,有什么可以优化的呢?
方案一:在用户没有输入的m毫秒后再发送请求(函数去抖)
方案二:在用户没有输入的m毫秒后再发送请求,但期间每隔n毫秒会自动发一次请求(函数节流)
函数去抖实现
实现用户停止输入1秒后开始发送搜索请求,以下实现不注重样式,仅实现需求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数去抖</title>
</head>
<body>
<h4>函数去抖实现</h4>
<input type="text">
<div class="show"></div>
</body>
<script>
var input = document.getElementsByTagName('input')[0]
input.addEventListener('keyup', function () {
debounce(doSearch, window, this.value)
})
function doSearch (searchText) {
var p = document.createElement('p')
p.innerText = '当前搜索内容: ' + searchText
document.getElementsByClassName('show')[0].appendChild(p)
}
function debounce (fn, context, searchText) {
clearTimeout(this.timer) // 关键点:1000ms内重复调用则清除timer
this.timer = setTimeout(function() {
fn.call(context, searchText) // 调用函数fn,context为fn所属作用域
}, 1000)
}
</script>
</html>
运行结果:
函数节流实现
以下实现用户停止输入2秒后发搜索请求,期间每隔500ms发一次搜索请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数节流</title>
</head>
<body>
<h4>函数节流实现</h4>
<input type="text">
<div class="show"></div>
</body>
<script>
var input = document.getElementsByTagName('input')[0]
input.addEventListener('keyup', function() {
throttle(doSearch, window, this.value, 500, 2000)
})
function doSearch (searchText) {
var p = document.createElement('p')
p.innerText = '当前搜索内容: ' + searchText
document.getElementsByClassName('show')[0].appendChild(p)
}
// (调用方法, 方法所属对象, 自动执行时间, 最大延迟执行时间 ))
function throttle (fn, context, searchText, autoDoTime, delay) {
clearTimeout(fn.timer)
// 记录当前时间
fn.currentTime = Date.now()
// 若该函数是第一次调用,则直接设置startTime,即开始时间,为currentTime,即此刻的时间
if(!fn.startTime){
fn.startTime = fn.currentTime
}
// 大于等于自动执行时间,调用方法
if(fn.currentTime - fn.startTime >= autoDoTime){
fn.call(context, searchText)
fn.startTime = fn.currentTime
} else {
// 大于最大延迟时间,调用方法
fn.timer = setTimeout(function(){
fn.call(context, searchText)
}, delay)
}
}
</script>
</html>
运行结果:
相关解释请参考代码中的注释。