防抖（debounce）

甜甜酷盖

已于 2022-06-08 20:42:33 修改

阅读量1.1k

点赞数 1

分类专栏：重点文章标签： javascript 前端开发语言防抖

于 2022-06-08 19:02:41 首次发布

本文链接：https://blog.csdn.net/weixin_52148548/article/details/125170284

版权

重点专栏收录该内容

3 篇文章 0 订阅

订阅专栏

防抖的应用场景

scroll事件滚动触发
搜索框输入查询
表单验证
按钮提交事件
浏览器窗口缩放，resize事件

防抖的原理

原理：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

举例：
事件响应函数在一段时间后才执行，如果在这段事件内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行dosomething函数。

<style>
    #container{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align: center;
        color:#fff;
        background-color: #444;
        font-size: 30px;
    }
</style>
<body>
    <div id="container"></div>
    //引入underscore库，其中的debounce可以实现防抖
    <script src="http://cdn.bootcss.com/underscore.js/1.9.1/underscore.js"></script>
    <script>
        let count = 0
        //演示时间是如何频繁发生的
        let container  = document.querySelector('#container')

        function doSomeThing(){
            //可能会做回调或者ajax请求
            container.innerHTML = count++;
        }
        //_.debounce（高阶函数）对doSomething函数进行包装，第一个参数为被包装函数的函数名，第二个参数为时间，表示多少毫秒后执行
        //第三个参数表示是否立即执行，如果设置true表示立即执行，默认值是不会立即执行container.onmousemove = _.debounce(doSomeThing,2000，true);
        container.onmousemove = _.debounce(doSomeThing,2000);
    </script>
</body>

防抖的分类

防抖分为立即防抖和非立即防抖：

立即防抖：多次触发事件，第一次会立即执行函数，之后在设定wait时间内触发的事件无效，不会执行。
非立即防抖：多次触发事件，只会在最后一次触发事件后等待设定的wait时间结束时执行一次。

手写防抖函数（debounce）

初步实现防抖函数：

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #container{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align: center;
        color:#fff;
        background-color: #444;
        font-size: 30px;
    }
</style>
<body>
    <div id="container"></div>
    <!-- //引入debounce.js文件 -->
    <script src="./debounce.js"></script>
</body>
</html>

js文件：

//防抖的函数
//这里用到了闭包
function debounce(func,wait,immediate){
    let timeout;
    return function(){
        //改变执行函数内部this的指向，让this指向container
        let context = this;
        //参数
        let args = arguments;
        clearTimeout(timeout)//只清除定时器，不清除timeout的值
        if(immediate){
            //立即执行:多次触发事件，第一次会立即执行函数，之后在设定wait时间内触发的事件无效，不会执行。
            //callNow来记录是否立即执行，callNow为true立即执行
            let callNow = !timeout;
            //wait时间内（timeout有值，callNow为false)不会立即执行
            //wait时间到了(timeout值置为null,callNow为true)立即执行
            timeout = setTimeout(()=>{
                timeout = null;
            },wait);
            if(callNow){
                func.apply(context,args)
            }
        }else{
            //非立即执行：多次触发事件，只会在最后一次触发事件后等待设定的wait时间结束时执行一次。
            timeout = setTimeout(()=>{
                func.apply(context,args)
            },wait)
        }
    }
}
let count = 0;
//演示时间是如何频繁发生的
let container = document.querySelector("#container");

function doSomeThing() {
  //可能会做回调或者ajax请求
  container.innerHTML = count++;
}
container.onmousemove = debounce(doSomeThing, 300,true);

防抖函数中返回值和取消操作的实现：

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #container{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align: center;
        color:#fff;
        background-color: #444;
        font-size: 30px;
    }
</style>
<body>
    <div id="container"></div>
    <button id="btn">取消防抖</button>
    <!-- //引入debounce.js文件 -->
    <script src="./debounce.js"></script>
</body>
</html>

js文件：

//防抖的函数
function debounce(func,wait,immediate){
    var timeout,result;
    var debounced = function(){
        //改变执行函数内部this的指向，让this指向container
        var context = this;
        //参数
        var args = arguments;
        if(timeout) clearTimeout(timeout);
        if(immediate){          
            var callNow = !timeout;
            timeout = setTimeout(()=>{
                timeout = null;
            },wait);
            if(callNow){
                result = func.apply(context,args)
            }
        }else{
            timeout = setTimeout(()=>{
                func.apply(context,args)
            },wait)
        }
        return result;
    }
    //取消防抖
    debounced.cancel = function(){
        clearTimeout(timeout)
        //防止内存泄露
        timeout = null;
    }
    return debounced;
}
let count = 0;
//演示时间是如何频繁发生的
let container = document.querySelector("#container");
let btn = document.querySelector('#btn')
function doSomeThing() {
  //可能会做回调或者ajax请求
  container.innerHTML = count++;
  return '想要的结果'
}
let doSome = debounce(doSomeThing,1000);
//点击按钮，取消防抖
btn.onclick = function(){
    doSome.cancel()
}
//给container绑定鼠标移动事件
container.onmousemove = doSome;

甜甜酷盖

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
防抖（debounce）

通俗理解：A和B说话，A一直bbbbbb，当A持续说了一段时间的话后停止讲话，过了10秒之后，我们判定A讲完了，B开始回答A的话；如果10秒内A又继续讲话，那么我们判定A没讲完，B不响应，等A再次停止后，我们再次计算停止的时间，如果超过10秒B响应，如果没有则B不响应。举例：事件响应函数在一段时间后才执行，如果在这段事件内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行dosomething函数。防抖的分类防抖分为立即防抖和非立即防抖：立即防抖：多次触发事件，第一次会立即执行函数
复制链接

扫一扫

专栏目录