JS函数节流和防抖

最新推荐文章于 2024-06-22 15:10:18 发布

你不讲 wood

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量651

点赞数 21

文章标签： javascript okhttp 开发语言前端

本文链接：https://blog.csdn.net/a123456234/article/details/139708717

版权

JS函数节流和防抖

前言

在开发中，有些js事件会产生如下问题：

用户频繁触发，ajax向后台发送数据,对服务器造成压力
一些浏览器事件:window.onresize、window.mousemove,onkeyup,oninput,onmousemove等，触发的频率非常高，会造成浏览器性能问题

如果你碰到这些问题，那就需要用到函数节流和防抖了。

概念

函数防抖（debounce）和函数节流（throttle）都是为了缓解函数频繁调用，它们相似，但有区别.

函数节流：在设定的时间间隔内只会执行一次任务。如果在同一个单位时间内某事件被触发多次，只有一次能生效
函数防抖：只有任务触发的时间间隔超过设定的间隔后，任务才会执行一次。如果在这时间间隔内又被触发，则重新计时。

节流如何实现

其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 onscroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；

<head>
    <style>
        .box{
            height: 2000px;
        }
    </style>
</head>
<body>
    <div class="box">
        123
    </div>
</body>
<script>

window.onscroll = throttle(function(){
    console.log('onscroll事件触发');
},200);

//节流
function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0;
    return function() {
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向问题，指向DOM对象
            fn.call(this);
        // 同步时间
          lastTime = nowTime;
        }
    }
}

</script>

加上节流后，触发次数只有几次，若没节流，则最起码会触发七八十次。
在这里插入图片描述

防抖如何实现

其原理就第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间后再执行。
代码:

<body>
    搜索: <input type="text" id="keyword"> 
</body>
<script>
    
    document.getElementById('keyword').onkeyup = debounce(function(){
        console.log('onkeyup事件触发');
    },500);

//防抖函数
function debounce(fn, delay) {
    // 闭包变量（变量不销毁，即延长变量的生命周期,缓存初次创建的变量对象），记录上一次的延时器
  	
   var timer = null;
    return function() {
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}

输入关键字查询，只执行一次，效果:
在这里插入图片描述

函数节流应用场景

节流的根本目的是为了解决触发的事件太快。如下是常用的场景：

鼠标连续多次click事件
鼠标移动、拖拽功能（mousemove）
监听resize事件做响应式调整
射击游戏的 mousedown/keydown 事件(只允许发射一枚子弹)
滚动scroll,连续滚动只执行一次。

函数防抖应用场景

对于连续的事件响应我们只需要执行一次回调：

如实时校验用户输入的用户名，oninput
关键字搜索（keyup）

总结

函数节流和函数防抖的核心就是限制某一个方法被频繁的触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，尤其是在事件回调中Ajax与后台进行交互的时候可以大大减轻服务器的压力，而这也是函数节流以及防抖多数情况下的应用场景。

你不讲 wood

关注

21
点赞
踩
19

收藏

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

函数节流和函数防抖的核心就是限制某一个方法被频繁的触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，尤其是在事件回调中Ajax与后台进行交互的时候可以大大减轻服务器的压力，而这也是函数节流以及防抖多数情况下的应用场景。
复制链接

扫一扫