函数防抖

最新推荐文章于 2024-06-25 01:37:55 发布

小白变怪兽

最新推荐文章于 2024-06-25 01:37:55 发布

阅读量1.9k

点赞数

分类专栏： javascript 文章标签：函数防抖

本文链接：https://blog.csdn.net/u013558749/article/details/84402052

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

什么是函数防抖？

简单来说,函数防抖指的是多次触发事件，事件处理函数只执行一次;

应用场景：

在连续点击查询按钮情况下或者缩放屏幕要触发某个事件等等；

实际应用：

下面来介绍两种实现方法：

点击按钮的最后触发时间
（1）初始化timer为null
（2）在初次点击查询按钮的时候，给timer赋值(赋值函数中触发事件的调用)
(3) 如果再次点击那会，timer已经有值，那就先清除timer再重新给timer赋值

function debounceA(fn, delay) {
     let timer = null;
     return function() {
         clearTimeout(timer)
         timer = setTimeout(function() {
             fn.apply(this)
         }, delay)
     }
 }

点击按钮立马触发条件，不过同时点击的话自定义时间内只执行一次

function debounceB(fn, delay) {
  	   let timer = null;
       return function() {
           timer === null && fn.apply(this)
           timer != null && clearTimeout(timer)
       
           timer = setTimeout(function() {
               clearTimeout(timer);
               timer = null;
           }, delay)
       }
   }

demo:

<!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>
<body>
    <button id='btn1'>最后执行</button>
    <button id='btn2'>立即执行</button>
    <script type="text/javascript">
    let btn1 = document.getElementById('btn1')
    let btn2 = document.getElementById('btn2')
    let count1 = 0;
    let count2 = 0;
    function debounceA(fn, delay) {
        let timer = null;
        return function() {
            clearTimeout(timer)
            timer = setTimeout(function() {
                fn.apply(this)
            }, delay)
        }
    }
    function debounceB(fn, delay) {
        let timer = null;
        return function() {
            timer === null && fn.apply(this)
            timer != null && clearTimeout(timer)
        
            timer = setTimeout(function() {
                clearTimeout(timer)
                timer = null
            }, delay)
        }
    }
    btn1.onclick = debounceA(function() {
        count1++;
        console.log(`最后执行${count1}次`)
    }, 500)

    btn2.onclick = debounceB(function() {
        count2++;
        console.log(`立即执行${count2}次`)
    }, 500)
    </script>
</body>
</html>

小白变怪兽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
函数防抖

什么是函数防抖？简单来说,函数防抖指的是多次触发事件，事件处理函数只执行一次;应用场景：在连续点击查询按钮情况下或者缩放屏幕要触发某个事件等等；实际应用：下面来介绍两种实现方法：点击按钮的最后触发时间（1）初始化timer为null（2）在初次点击查询按钮的时候，给timer赋值(赋值函数中触发事件的调用)(3) 如果再次点击那会，timer已经有值，那就先清除timer再...
复制链接

扫一扫

专栏目录