Js中防抖与节流

更新日期: 2021-07-16阅读: 1.6k标签: 防抖

防抖的概念

防抖又叫为函数防抖(debounce):指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

前端开发中,常见的事件如,onresizescrollmousemove ,mousehover 等会短时间内多次触发(频繁触发),不做限制的话可能一秒执行几百次,

在这些函数内部如果还执行了其他函数,尤其是执行了操作 dom 的函数的话(浏览器操作 DOM 是很耗费性能的),那不仅会浪费计算机资源,

还会降低程序运行速度,甚至造成浏览器卡死、崩溃。

除此之外,短时间内重复调用 ajax 不仅会造成数据关系的混乱,还会造成网络拥堵,增加服务器压力等问题。

防抖代码实现

防抖的关键是需要一个 setTimeout 来辅助实现,延迟运行需要执行的代码。

如果方法多次触发,则把上次记录的延迟执行代码用 clearTimeout 清掉,重新开始计时。

若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码。

注意:当你一直连续不断的点击超过你设置的时间,并且只有第一次点击有效,这不是bug,这是概念问题,注意看下面标红这部分,

防抖又叫为函数防抖(debounce):指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js防抖与节流</title>
</head>
<body>
    <!--按钮-->
    <button id="btn">点击提交</button>

    <script type="text/javascript">

        var num = 1;
        const seckill = () => {
            console.log('我是防抖,你点击了按钮' + num++)
        }

        // 防抖函数
        const debounce = (fun, wait) => {
            let timeout;
            return function () {
                if (timeout) {
                    clearTimeout(timeout);
                }
                //第一次执行任务,timeout是null,此时callNow是true,需要立即执行
                let callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait);
                if (callNow) {
                    fun.apply(this);
                }
            }
        };
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法( 1s内只允许一次操作)
        btn.addEventListener('click', debounce(seckill, 1000));  

    </script>

</body>
</html>

节流的概念

节流又叫函数节流(throttle):指当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

节流代码实现

  • 鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
  • 在页面的无限加载场景下,需要用户在滚动页面时,每隔一段时间发一次 ajax 请求,而不是在用户停下滚动页面操作时才去请求数据;
  • 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断;

节流和防抖都是差不多的,区别在于是“立即执行版” 和 “非立即执行版” 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js防抖与节流</title>
</head>
<body>
    <!--按钮-->
    <button id="btn">点击提交</button>

    <script type="text/javascript">

        var num = 1;
        const seckill = () => {
            console.log('点击了按钮' + num++)
        }
        function throttle(callback, delay) {
            var timer, begin = new Date();
            return function () {
                //记录事件触发时的时间
                var current = new Date();
                //清除上一次定时器任务
                clearTimeout(timer);
                //判断距上一次触发是否已过了delay的时间
                if (current - begin >= delay) {
                    callback();
                    begin = current;
                } else {
                    timer = setTimeout(() => {
                        callback();
                    }, delay);
                }
            }
        }
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法( 1s内只允许一次操作)
        btn.addEventListener('click', throttle(seckill, 1000));

    </script>

</body>
</html>

防抖和节流的区别

函数防抖:是n秒内只执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

函数节流:是间隔时间执行,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

原理:

防抖是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,都会清除当前的 timer 然后重新设置超时调用,即重新计时。这样一来,只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器。

总结

函数防抖和节流的实现很简单,能很友好的解决前端开发过程中的遇到的很多问题,提升性能,优化用户体验。在实际的开发中,防抖函数还是节流函数的选择需要开发者针对不同的应用场景进行相应的应用。


链接: https://www.fly63.com/article/detial/10533

Js防抖函数

是在写keyup事件的时候,每次触发,都会请求后台接口,为了避免,每次请求,键盘弹起之后,隔上一段时间再去请求,所以用防抖函数,多次事件触发后、事件处理函数只执行一次

js的抖动,解决方法 : 防抖&节流

在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 .

浅谈js防抖和节流

防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。(信我,你看完肯定就懂了)

在 Vue 中使用lodash对事件进行防抖和节流

有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面。例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒内触发数千次,这可能会导致一些严重的性能问题

手写实现防抖&节流

解决当函数在某些场景下被无限制的频繁调用,会增加浏览器的负担,会造成卡顿的现象;鼠标滚动、键盘输入操作、窗口resize等等,事件持续触发时,如果间隔时间小于预设的时间,不会执行函数,同时以最后触发事件的时间为准重新计时。

Vue中的防抖

应用场景:多次点击提交按钮 首次提交执行,重复提交就会等待一定的时间提交执行;首次点击提交按钮会立即执行一次debounce方法,后面3s内不触发事件才能继续执行

抛开lodash,手写节流和防抖函数

面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖

函数防抖理解和仿写

函数防抖的理解:连续触发事件,最后一次事件触发后,超过了规定时间还没有再次触发,这时候会执行一次事件,这就是函数的防抖

js实现函数防抖与节流

防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。节流:规定在一个单位时间内,只能触发一次函数。

什么是防抖和节流,他们的应用场景是哪里?

防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念,必先了解概念所应用的场景。在 JS 这个世界中,有哪些防抖的场景呢

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!