JavaScript-函数防抖

原创

mb5fe18f5282239 2021-01-22 10:49:01 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mb5fe18f5282239的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

在前端开发过程中，我们会遇到一些频繁触发的事件，比如：window的resize和scroll、mousemove、keyup、keydown等等。

下面我们通过代码来看看mousemove事件是如何频繁触发的：

index.html文件代码如下：

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>debounce防抖</title>
<style>
#container{
width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
}
</style>
</head>
<body>
<divid="container"></div>
<scriptsrc="debounce.js"></script>
<script>
var count = 1;
var container = document.getElementById("container");
function mouseMove() {
console.log(this);
container.innerHTML = count++;
};
container.onmousemove = mouseMove
</script>
</body>
</html>

运行该html文件，我们将鼠标在我们定义的矩形区域移动，只是简单的从下往上滑动，mouseMove函数就被触发了99次。

JavaScript-函数防抖_java

假设mouseMove函数时复杂的回调函数或者是ajax请求，如果我们没有对事件处理函数调用的频率进行限制，会加重浏览器的负担，导致用户体验极差。这时候我们可以采用debounce（防抖）或throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

今天我们主要讲讲防抖。

防抖原理

函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

初步实现

根据上面防抖的描述，我们可以利用延时函数setTimeout写第一版防抖函数的实现代码：

function debounce(func, wait) {var timeoutreturnfunction() {    clearTimeout(timeout)    timeout = setTimeout(func, wait)}}

在最开始的例子中使用debounce：

container.onmousemove = debounce(mouseMove, 1000)

这样子修改后，只有在我们移动完1s内不再触发，才会执行回调事件mouseMove。

this

我们在mouseMove函数中执行 console.log(this)，会发现不使用debounce和使用debounce情况下，this的值是不一样的。

不使用debounce时this的值为

<divid="container"></div>

而使用debounce函数时，this则会指向window对象。

所以我们需要将this指向正确的函数，这时候我们可以利用apply()方法实现。代码修改如下：

function debounce(func, wait) {var timeoutreturnfunction() {var context = this    clearTimeout(timeout)    timeout = setTimeout(function() {      func.apply(context)}, wait)}}

修改完成后，我们再触发事件，可以看到此时this的指向正确了。

event对象

JavaScript在事件处理函数中会提供事件对象event，我们将mouseMove函数修改如下：

function mouseMove(e) {    console.log(this);    console.log(e);    container.innerHTML = count++;};

如果不使用debounce函数，控制台打印的e是MouseEvent对象，但当我们调用debounce函数，打印出来的确实undefined。

所以我们再次修改代码如下：

function debounce(func, wait) {
var timeout
returnfunction() {
var context = this
var args = arguments
clearTimeout(timeout)
timeout = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}

至此，我们修复了this指向和event对象问题，整个防抖函数已经算是比较完善了。

立即执行

接下来我们再考虑一个新的需求：如果我们希望是在事件一触发就立刻执行函数，而不是等到事件停止触发后再执行；并且等到停止触发n秒后，才可以重新触发执行。

我们可以通过immediate参数来判断是否立刻执行，代码修改如下：

function debounce(func, wait, immediate) {
var timeout
returnfunction() {
var context = this
var args = arguments
if(timeout) {
clearTimeout(timeout)
}
if(immediate) {
// 已经执行过不再执行
var callNow = !timeout
timeout = setTimeout(function() {
timeout = null
}, wait)
if(callNow) {
func.apply(context, args)
}
} else{
timeout = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}
}

container.onmousemove = debounce(mouseMove, 1000, true)

返回值

我们需要注意的一点是：mouseMove函数可能是有返回值的，所以我们也要返回函数的执行结果，但是immediate为false的时候，因为使用setTimeout，我们将func.apply(context, args)的返回值赋给变量，最后再return的时候，值会一直是undefined，所以我们只在immediate为true的时候返回函数的执行结果。