1.何为防抖与节流函数呢？

1.防抖（debounce）：通过setTimeout方式，在一定的时间间隔内，将多次触发的事件转化为一次触发。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次

举例：当用户在进行表单提交时，用户提交一次就向服务器发送一次请求，当用户频繁地点击提交，则很自然地就向服务器多次请求，则会对服务器压力很大，那我们就需要想办法解决这种问题

2.节流（throuttle）：当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
举例：当我们打游戏的时候长按某个按键，动作是有规律的在间隔时间触发一次

#1.先来看一个没有经过任何处理的demo

由上图可以知道当我们每点击一次控制台就输出一次，这实际上在现实项目中是很浪费资源的

2.来看一下经过防抖函数包装之后的代码

<!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>

    <input type="text" name="" id="">

    <input type="submit" value="提交" id="input">

    <script>

        const input = document.querySelector('#input');

        // input.addEventListener('click', sumbit);

        input.addEventListener('click', debounce(sumbit, 2000));

        function sumbit(e) {

            console.log('点击');

            // console.log(this);

            // console.log(e);

        };

        //第一次点击立即执行，第二次之后就启用防抖函数

        function debounce(func, delay) {

            let timer = null;

            return function(...args) {

                let firtClick = !timer;

                if (timer) {

                    clearTimeout(timer)

                }

                if (firtClick) {

                    func.apply(this, args)

                }

                timer = setTimeout(() => {

                    timer = null

                }, delay)

            }

        }

    </script>

</body>

</html>

效果图如下：

3.来看一下经过节流函数包装之后的代码

代码如下：

<!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>

    <input type="text" name="" id="">

    <input type="submit" value="提交" id="input">

    <script>

        const input = document.querySelector('#input');

        // input.addEventListener('click', sumbit);

        input.addEventListener('click', throuttle(sumbit, 2000));

        function sumbit(e) {

            console.log('点击');

            // console.log(this);

            console.log(e);

        };

        function throuttle(func, delay) {

            let begin = 0;

            return function() {

                let currenttime = new Date().getTime();

                console.log(currenttime - begin);

                if (currenttime - begin > delay) {

                    func.apply(this, arguments)

                    begin = currenttime;

                }

            }

        }

    </script>

</body>

</html>

效果图如下：

4.总结：1.防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗

　　　　2.防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

参考连接：https://www.bilibili.com/video/BV1Vy4y1y7tj?p=3&share_source=copy_web

Js中的防抖与节流函数的更多相关文章

  1. JS中的防抖与节流

    什么是防抖?and什么是节流?一起来开心的学习下吧. 首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次.举个例子,当 ...

  2. JS中的防抖和节流

    JS-防抖和节流 在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和 ...

  3. JS中的日期内置函数

    用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   ...

  4. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  5. JavaScript 中的防抖和节流

    什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...

  6. JS简单实现防抖和节流

    一.什么是防抖和节流 Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源很强大,也不带这么玩的. 1. 防 ...

  7. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  8. 防抖与节流函数<转>

    参考连接:https://www.cnblogs.com/zhuanzhuanfe/p/10633019.html https://blog.csdn.net/Beijiyang999/article ...

  9. JS中的substring和substr函数的区别

    1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. ...

随机推荐

  1. Google Hacking 搜索引擎攻击与防范

    Google Hacking,有时也会被称为 Google dorking,是一种利用谷歌搜索的高级使用方式进行信息收集的技术.这个概念最早在2000年由黑客 Johnny Long 提出并推广,一系 ...

  2. Java并发之AQS原理剖析

    概述: AbstractQueuedSynchronizer,可以称为抽象队列同步器. AQS有独占模式和共享模式两种: 独占模式: 公平锁: 非公平锁: 共享模式: 数据结构: 基本属性: /** ...

  3. vue 安装sass5.0版本遇到的问题

    cnpm install node-sass@4.9.2 --save-dev cnpm install sass-loader@7.3.1 --save-dev cnpm install style ...

  4. 一文读懂一条 SQL 查询语句是如何执行的

    2001 年 MySQL 发布 3.23 版本,自此便开始获得广泛应用,随着不断地升级迭代,至今 MySQL 已经走过了 20 个年头. 为了充分发挥 MySQL 的性能并顺利地使用,就必须正确理解其 ...

  5. GO学习-(12) Go语言基础之函数

    Go语言基础之函数 函数是组织好的.可重复使用的.用于执行指定任务的代码块.本文介绍了Go语言中函数的相关内容. 函数 Go语言中支持函数.匿名函数和闭包,并且函数在Go语言中属于"一等公民 ...

  6. 从性能角度帮你理解HTTP协议

    因为做性能测试分析的人来说,HTTP 协议可能是绕不过去的一个槛.在讲 HTTP 之前,我们得先知道一些基本的信息. HTTP(HyperText Transfer Protocol,超文本传输协议) ...

  7. 手把手教你实现三种绑定方式（call、apply、bind）

    关于绑定首先要说下this的指向问题. 我们都知道: 函数调用时this指向window 对象调用函数时this指向对象本身 看下面得例子: // 1 function test(){ const n ...

  8. 开放式神经网络交换-ONNX（下）

    开放式神经网络交换-ONNX(下) 计算节点由名称.它调用的算子operator的名称.命名输入的列表.命名输出的列表和属性列表组成. 输入和输出在位置上与算子operator输入和输出相关联.属性通 ...

  9. 前台JS遍历Table的所有单元格数据内容

    在日常开发过程中为了减少与后台服务器的交互次数,大部分的功能都会放到前台使用JS来完成. 例如:一个表中有ID(FOCUS_SEQ)和Name(COLUMNCTRL)两个字段,其中ID是自定义连续增长 ...

  10. 再看 Java 中的单例

    此前面试遇到了单例问题,本以为已经背的滚瓜烂熟,没想到被问单例如何避免被反射和序列化破坏,虽然后来还是等到了通知,但还是复习一下单例的实现方式,并学习防止反射和序列化破坏的手段. 基本实现方式 其他相 ...