前言

　　前端踩雷：短时间内重复提交导致数据重复。

　　对于前端大佬来说，防抖和节流的技术应用都是基本操作。对于“兼职”前端开发的来说，这些都是需要躺平的坑。

我们今天就来盘一盘js防抖与节流，并且解决开发中遇到的问题。

PS：重复提交问题我用的是防抖的方法进行避免。

防抖的概念

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

　　前端开发中，常见的事件如，onresize，scroll，mousemove ,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.cnblogs.com/xiongze520/p/15011323.html


创作不易，任何人或团体、机构全部转载或者部分转载、摘录，请在文章明显位置注明作者和原文链接。

因为它，我差点删库跑路：js防抖与节流的更多相关文章

  1. Oracle删库跑路

    --10g R2 startup mount exclusive restrict; alter system enable restricted session; drop database; -- ...

  2. P5270 无论怎样神树大人都会删库跑路

    题目地址:P5270 无论怎样神树大人都会删库跑路 第一眼看上去是模拟,似乎是 \(O(n)\) 的 水题 信心满满的写完: #include <bits/stdc++.h> using ...

  3. SQL 从入门到 DBA 删库跑路

    SQL 从入门到 DBA 删库跑路 一.基础 人员信息表: ID 姓名 性别 出生 婚否 学历 工资 工会 35009449 孙xx 男 1978-2-17 未婚 中专 3000 TRUE 35000 ...

  4. 数据误操作，删库跑路？教你使用ApexSQLLog工具从 SQLServer日志恢复数据！

    前几天同事不小心误操作,将SQLServer库的一张表的一个状态字段给刷成了一个统一状态,由于是update执行所以原来的相关状态无法确定.发生这种事情的时候我的小伙伴背后 一凉,估计心里里面想这怕是 ...

  5. Mysql binlog备份数据及恢复数据，学会这个，我在也不怕删库跑路啦~

    导读 我一直都主张,技多不压身(没有学不会的技术,只有不学习的人),多学一项技能,未来就少求人一次.网上经常听到xxx删库跑路,万一真的遇到了,相信通过今天的学习,也能将数据再恢复回来~~~ 当然啦, ...

  6. 教你如何6秒钟往MySQL插入100万条数据!然后删库跑路！

    教你如何6秒钟往MySQL插入100万条数据!然后删库跑路! 由于我用的mysql 8版本,所以增加了Timezone,然后就可以了 前提是要自己建好库和表. 数据库test, 表user, 三个字段 ...

  7. 【巨杉数据库SequoiaDB】巨杉Tech | “删库跑路”又出现，如何防范数据安全风险？

    最近,又双叕有企业被“删库”了.来自微盟官网的消息,微盟的业务系统数据库(包括主备)遭遇其公司运维人员的删除,系统将停止运营超48小时. 频发的类似事件也让大家对于数据安全的关注不断提高.数据是一个科 ...

  8. The Data Way Vol.3｜做到最后只能删库跑路？DBA 能做的还有很多

    关于「The Data Way」 「The Data Way」是由 SphereEx 公司出品的一档播客节目.这里有开源.数据.技术的故事,同时我们关注开发者的工作日常,也讨论开发者的生活日常:我们聚 ...

  9. 大数据开发从入门小白到删库跑路（一）- 获取Hadoop

    Hadoop是一个可以通过相对简单编程模型实现跨多台计算机集群分布式处理大型数据集的框架.它不是依赖于高额成本的硬件可靠性来提供高可用性,Hadoop的设计能从单个服务器扩展到数千台机器,每个机器提供 ...

随机推荐

  1. flink-cdc读取postgres报异常，没有发布表

    异常信息 must be superuser to create FOR ALL TABLES publication 必须是超级用户才能为所有发布表创建 网上搜索了一天,都毫无头绪,后面搜索到了一个 ...

  2. redis中AOF和RDB的关闭方法

    redis中AOF和RDB的关闭方法   问题:当往redis中导入数据时,有时会出现redis server went away的情况: 原因: 导入的数据量太大,而内存不够(即内存1G,但数据有2 ...

  3. c++ 各种数据结构的时间空间复杂度

    普通线段树    时间 log2(n); 空间 n+log2(n)+log4(n)+log(8)n+.....+logn(n)==n*4; 动态开点线段树 时间 log2(n); 空间 q*log2( ...

  4. NVIDIA深度学习Tensor Core性能解析（上）

    NVIDIA深度学习Tensor Core性能解析(上) 本篇将通过多项测试来考验Volta架构,利用各种深度学习框架来了解Tensor Core的性能. 很多时候,深度学习这样的新领域会让人难以理解 ...

  5. macOS 下使用命令行进行用户（组）管理，就是这么简单！ dscl 你很有必要了解一下！！

    大家好,我是@小猿来也... Command-line interface to Directory Services. 在 linux 系统中我们习惯了使用 useradd,userdel,user ...

  6. 【题解】 hdu2955 Robberies

    有抱负的罗伊·劫匪已经看过很多美国电影,他知道坏人通常会被抓住,经常是因为他们太贪心了.他决定在银行抢劫案中工作一段时间,然后退休后到一所大学从事一份舒适的工作. 题目: 罗伊去几个银行偷盗,他既想多 ...

  7. Linux分区,格式化概念理解

    一.分区概念: 逻辑上分成不同的存储空间. 分区类型: 主分区:最多只能有4个 扩展分区:最多只能有1个. 主分区加扩展分区最多有4个. 布恩那个写入数据,只能包含逻辑分区 逻辑分区: 主分区为什么只 ...

  8. 从五大结构体，带你掌握鸿蒙轻内核动态内存Dynamic Memory

    摘要:本文带领大家一起剖析了鸿蒙轻内核的动态内存模块的源代码,包含动态内存的结构体.动态内存池初始化.动态内存申请.释放等. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列九 动态内存Dyna ...

  9. 海康威视ISC平台的VUE二次开发接入实现

    第一步 取得ISC平台的appkey以及secret,以及安装ISC平台的主机IP,这一步至关重要!!! 第二步 由于目前我所在的公司项目前端的代码均由vue所实现,所以利用vue-cli创建一个最简 ...

  10. 性能工具之linux常见日志统计分析命令

    引言 我前几天写过的性能工具之linux三剑客awk.grep.sed详解,我们已经详细介绍 linux 三剑客的基本使用,接下来我们看看具体在性能测试领域的运用,本文主要介绍的是在 Tomcat 和 ...