防抖 节流_【前端面试】节流与防抖

我们用两张图表示什么是节流和防抖。

8b1d4c2d9f90deffca647bf88adfc769.png
防抖

495544e51e4778fec2a219f38850446b.png
节流

由图可见,防抖的意思是,当用户在一段时间内连续频繁的试图执行一个函数的时候,只有最后一次,函数被真正的执行。节流的意思是,当用户在某一个时刻执行了一次函数的时候,在一段时间 t 内,再次执行该函数都没有作用

下面,我们用实例,写一个防抖和节流出来。

请先利用下面的命令安装 jquery,在项目根目录下执行。

npm install jquery -save

在 body 里添加

<button id="btn1">btn1</button>

一、防抖

        let id;$("#btn1").on('click',function(e){clearTimeout(id);id = setTimeout(function(){console.log('button clicked',id)},1000);})

这是一个最简单的防抖,但是,缺点是明显的,一个临时变量被放在 window 对象里面了,污染了全局变量空间。因此,我们想把这个变量写成局部的,有经验的同学一定知道,我们该用闭包了,既,使用柯理化函数的编程思想。事实上,上面的这个例子已经是一个闭包了,因为最外层的 id 接住了函数内部 setTimeout 的返回值,因此这个函数的栈内存是不会销毁的。只是,我们的优化方案需要在此基础上再加一层。

本着这个思路,我们有:

        function debounce(){let id;return function(){clearTimeout(id);id = setTimeout(function(){console.log('button clicked',id)},1000);}}var fn = debounce();$("#btn1").on('click',function(e){fn();})

首先,一个全局变量 fn 接住了 debounce 的一个返回值,闭包形成,debounce 内部的 id 被保存住,因此,每次 fn 执行的时候,它所用到的 id 都是一个,这和第一个例子当中全局作用域上面的 id 是等价的,只不过,不会污染全局作用域。

防抖的原理是,如果用户频繁的点击按钮,上一次的 setTimeout 都会立刻被下一次清除,需要执行的函数始终打不出来,只有最后一次没人清除它,因此会被执行。

二、节流

下面我们讲节流,首先,我们还是利用全局作用域写一个简单的版本。

        let time = new Date();$("#btn1").on('click', function (e) {let time1 = new Date();if (time1 - time > 2000) {console.log(time1 - time);time = time1;}})

同样的,这套方法污染了全局作用域,因此,我们需要写个闭包出来,保存局部变量。

        function throttle() {let time = new Date();return function () {let time1 = new Date();if (time1 - time > 2000) {console.log(time1 - time);time = time1;}}}let fn = throttle();$("#btn1").on('click', function (e) {fn();})

节流的原理比防抖更简单,当函数被成功的执行过一次,本次成功执行的时间会被记录下来,那么当用户频繁点击按钮的时候,这些次记录的时间距离上次成功执行的时间太短,小于阈值,因此不被执行。

请各位同学一定要把代码搞到本地跑一遍,这样才能加深印象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/530617.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

没数据时y轴不显示_Matplotlib数据可视化

1.Matplotlib介绍什么是MatplotlibMatplotlib是一个Python的绘图库&#xff0c;它可与 NumPy 一起使用&#xff0c;可以代替MMatplotlib安装由于Matplotlib是第三方库&#xff0c;所以我们需要安装它才可以使用。注意&#xff0c;Matplotlib3.0要求python3版本才可安装使用。安…

1099: 角谷猜想(多实例测试)

1099: 角谷猜想&#xff08;多实例测试&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 5930 解决: 3888 [提交] [状态] [讨论版] [命题人:admin] 题目描述 任何一个自然数&#xff0c;如果是偶数&#xff0c;就除以2&#xff0c;如果是奇数&#xff0c;就乘以3再加1。最…

python软件运行界面_python运行界面 python的图形用户界面怎么运行

为什么用Python开发界面应用程序1)wxWidgets是一个比MFC优雅的库&#xff0c;TortoiseCVS用wxWidges而不用MFC&#xff0c;就是因为wxWidgets好用&#xff0c;而不是为了可以移植。 2)Python的面向对象脚本语言编程适合快速界面开发 3)Python在服务器端和客户端都非常有前途&am…

1100: 求组合数(函数专题)

1100: 求组合数&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 6264 解决: 4653 [提交] [状态] [讨论版] [命题人:admin] 题目描述 马上要举办新生程序设计竞赛了&#xff0c;与以往不同的是&#xff0c;本次比赛以班为单位&#xff0c;为了全面衡量…

python画图隐藏画笔_python画图

转至&#xff1a;https://blog.csdn.net/weixin_43943977/article/details/1026913921、灰色樱花树from turtle import *from random import *from math import *def tree(n,l):pd()#下笔#阴影效果t cos(radians(heading()45))/80.25pencolor(t,t,t)pensize(n/3)forward(l)#画…

1101: 逆序数字(函数专题)

1101: 逆序数字&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 6333 解决: 4717 [提交] [状态] [讨论版] [命题人:admin] 题目描述 输入一个正整数n&#xff0c;计算n的逆序数m&#xff0c;输出m与n的和。要求程序定义一个inverse()函数和一个main(…

循环划线_经济内外双循环下的思考!

原创&#xff1a;群赢说到这个内外双循环&#xff0c;我们汽车后市场朋友们&#xff0c;应该知道车子发动机水冷系统就是一个双循环&#xff0c;内部小循环&#xff0c;外部大循环。在发动机温度不高的时候&#xff0c;水在做小循环&#xff0c;在发动机周边流动。当发动机温度…

1103: 平均学分绩点(函数专题)

1103: 平均学分绩点&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 5386 解决: 2917 [提交] [状态] [讨论版] [命题人:admin] 题目描述 平均学分绩点&#xff08;Grade Point Average&#xff0c;即GPA&#xff09;是以学分与绩点作为衡量学生学习的…

1102: 火车票退票费计算(函数专题)

1102: 火车票退票费计算&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 5055 解决: 3204 [提交] [状态] [讨论版] [命题人:admin] 题目描述 2013年起&#xff0c;火车票退票费比例下调&#xff1a;票面乘车站开车时间前48小时以上的按票价5%计退票费…

ksrot php_php中ksort函数的功能起什么作用呢?

摘要:下文讲述php中ksort函数的功能讲解&#xff0c;如下所示&#xff1b;ksort函数功能说明:根据数组的键名进行升序排列ksort语法:ksort(array,sortingtype);--------参数说明------array:必填参数,待进行操作的数组sortingtype&#xff1a;非必填参数&#xff0c;此参数值可…

1104: 求因子和(函数专题)

1104: 求因子和&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 4633 解决: 3669 [提交] [状态] [讨论版] [命题人:admin] 题目描述 输入正整数n&#xff08;2<n<1000&#xff09;&#xff0c;计算并输出n的所有正因子(包括1&#xff0c;不包括…

计算机组成原理实验软件仿真系统_计算机系统组成原理(基础)

网上关于计算机系统的讨论众说纷纭。刚开始&#xff0c;我卯足了劲想寻找一个标准答案&#xff0c;后来发现这并不存在&#xff01;因为计算机系统层次不一&#xff0c;看你从什么角度来理解这个问题。在这篇文章里&#xff0c;我的介绍一切从简&#xff0c;不求锦上添花&#…

1107: 回文数猜想(函数专题)

1107: 回文数猜想&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 3922 解决: 2508 [提交] [状态] [讨论版] [命题人:admin] 题目描述 一个正整数&#xff0c;如果从左向右读&#xff08;称之为正序数&#xff09;和从右向左读&#xff08;称之为倒序…

机器人总动员中的小草_机器人总动员读后感

1机器人总动员读后感机器人总动员读后感(一)昨天&#xff0c;我看了一部电影《机器人总动员》&#xff0c;主人公是一个机器人&#xff0c;它叫瓦力。非常好看。这部电影讲的是几百年以后&#xff0c;地球被人们弄得全是垃圾&#xff0c;人类没办法在地球上生活了&#xff0c;只…

输入回车时结束循环python_python-用户输入退出以在循环时中断

最简单的解决方案可能是创建一个函数,该函数将显示的消息作为输入,并在测试其满足条件后返回用户输入&#xff1a;def guess_input(input_message):flag False#endless loop until we are satisfied with the inputwhile True:#asking for user inputguess input(input_messa…

1109: 数根(函数专题)

1109: 数根&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 4149 解决: 3263 [提交] [状态] [讨论版] [命题人:admin] 题目描述 输入一个正整数&#xff0c;输出该数的数根。数根可以通过把一个数的各个位上的数字加起来得到。如果得到的数是一位数&…

python中while语句是_如何在Python中使用while语句[适合初学者]

while语句是重复循环的语句&#xff0c;那么如何用Python编写&#xff0c;下面Gxl网就带领大家来学习一下Python中使用while语句。【推荐阅读&#xff1a;Python视频教程】一&#xff1a;什么是while语句&#xff1f;Python中怎么使用whilewhile语句重复用于相同的过程进行重复…

1110: 最近共同祖先(函数专题)

1110: 最近共同祖先&#xff08;函数专题&#xff09; 时间限制: 1 Sec 内存限制: 128 MB 提交: 3818 解决: 3290 [提交] [状态] [讨论版] [命题人:admin] 题目描述 如上图所示&#xff0c;由正整数1, 2, 3, …组成了一棵无限大的二叉树。从某一个结点到根结 点&#xff08;编…

echart freemarker 模板_SpringBoot集成Freemarker模板生成Echarts图片(三)

紧接着前面两篇&#xff0c;本篇采用Freemarker模板来生成Echarts图片。一. 项目结构二. Freemarker模板(1)柱状图{"title": {"text": "${title}","textStyle": {"color": "red","fontSize": 15,"…

ios 系统提示框_ios13终于能屏蔽系统更新了!附详细教程

很多人会遇到这样的烦恼&#xff0c;ios频繁更新&#xff0c;自己用惯了当前系统版本&#xff0c;系统总提示新的更新请求&#xff0c;不小心点到之后&#xff0c;系统就会自动更新安装&#xff0c;有很多小伙伴更新后&#xff0c;手机变卡顿&#xff0c;耗电量加大&#xff0c…