[小实例]——防抖

最新推荐文章于 2024-08-30 09:43:19 发布

虽菜但瘾

最新推荐文章于 2024-08-30 09:43:19 发布

阅读量201

点赞数 1

分类专栏：小实例

本文链接：https://blog.csdn.net/sungoodluck666/article/details/109386377

版权

javascript

小实例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

防抖

在前端页面中，一般对于能与使用者交互并且调取后端数据的地方要做特殊处理———— 防抖

什么是防抖

防抖就是当一个事件持续触发时，指定间隔时间内没有再触发该事件，事件处理函数才会执行。即某个函数在短时间内只执行最后一次。（函数被触发时，需要先延迟，在延迟的时间内，如果再次被触发，则取消之前的延迟，重新开始延迟。这样就能达到，只响应最后一次，其余的请求都过滤掉。）这种处理方式有很多实际的应用场景：比如对输入框数据的校验处理，没必要每输入一个字符就校验一遍；

页面就简单的使用一个盒子，每当鼠标滑过盒子，就会触发事件，并在盒子上显示递增的数字
不多说，上代码！

test.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <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>
    <div id="container"></div>
    <script src="./debounce.js"></script>
</body>

</html>

test.js

var count = 1; // 页面显示的数字
var container = document.getElementById('container'); // 获取dom

// 在页面上写入需要显示的数字
function getUserAction() {
    container.innerHTML = count++;
};

// 防抖
function debounce(fn,delay){
    let timer = null //借助闭包，将timer存在缓存中
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) 
    }
}
container.onmousemove = debounce(getUserAction, 500);

大致逻辑是：

将鼠标在页面上移动时就会触发onmousemove事件，然后触发debounce回调，传入一个函数和间隔时间。
debounce（）中定义一个局部变量timer，用来判断是否执行，
第一次执行函数时，跳过判断，然后写入一个计时器，用来执行，这时候不做任何操作，页面将会写入数字
如果动了鼠标，就会再次触发，这时候，timer就不为空，进入判断，清除计时器，然后再次写入一个计时器，在等待delay毫秒之后执行fn