专栏首页用户7363577的专栏谈谈js中的函数节流

谈谈js中的函数节流

写在前面

几天没有更新博客了,最近也没什么可忙的,今天我们说说js函数中常见的性能优化中的一个方式-函数节流!

首先明白一点,但凡涉及到性能优化的,基本都不是什么技术难点,为什么这么说呢?我们都知道, 所谓的性能优化说白了就是为了让网页加载的更快,这样才会让用户的体验更好,其实有很多种办法可以实现,是吧,我们经常在做网页设计的时候透明的图片习惯存储为PNG-8的,如果不是很小的图片的时候,如果很小的话才会存储为PNG-24的,为什么呢?PNG-8的要比PNG-24的更加小,为什么我们非透明的图片一般存储为Jpeg格式的, 因为小,是吧,小就导致页面加载结束的快,流畅性就比较强,自然用户体验就会比较好,那么说了那么多,其实是想说明一个问题,我们在使用和设计网页的时候其实不是说必须是快才是好的,有的时候也是需要用户不那么快的点击访问,规定的时间内不让他连续点击,两个目的,第一是因为用户量非常大的时候,用户如果连续点击会导致服务器受不了,第二个原因是有的时候我们的需求是规定时间内不准点击第二次,例如发送验证码的功能实现,其实很多的场景是不允许我们的用户连续点击的,所以我们要明白这个,那么这个就是我们今天要说的,函数节流!

说一下函数节流的原理,其实很简单,就是我们写一段代码的时候,规定他在一定时间内不准连续执行, 第一次调用函数的时候,创建一个定时器,执行函数以后重置定时器,同时清除之前的定时器,那么每次其实我们的定时器都是最新的,控制着我们的代码在规定时间内执行。

下面我们简单的写一个:

<!--
	aim : csdnTest
	author : clearlove
	date : 10-30
	
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="idbtn" value="点击测试" />
	</body>
	<script type="text/javascript">
		//拿到元素
		var btn = document.getElementById("idbtn");
		//加一个控制器
		var lock = true;
		btn.onclick = function(){
			//第一次点击的时候是满足控制器的,所以第一次是执行的,
			if(!lock){
				return;
			}
			//执行以后,我们将控制器状态改为不可执行的状态
			lock = false;
			console.info(Math.random());
			//这里我们设置一个时间,在函数每次执行以后的一秒后将控制器的状态改为可执行
			setTimeout(function(){
				lock = true;
			},1000);
		}
	</script>
</html>

上面的代码注释写的很清楚,这是我写的一个很简单的例子,当然有的人说这里为什么不用setInterval,这里解释一下,也可以使用,只是看实际情况来处理,那么setInterval其实是每隔一段时间执行一次,settimeout是在规定时间后执行一次,还是有很大区别的,这个看自己的需求!

有人说这个需求是不是很多呢?其实是很多的,我们常见的淘宝,天猫其实这里都是做了这样的处理的,只是他们的处理方式看起来比较高级,但是原理还是一样的,我们很常见的一个淘宝的输入框,你直接输入第一个字,他监听的是你的键盘事件,每次输入的时候他都是搜索一下数据库,然后将提示文字给你展示看,对吧,那么这个时候其实他是有0.几秒的延时操作的,你想象一下,很多人同时访问淘宝的时候,如果每个人的输入事件都是立刻响应的话,服务器的压力是有多大,虽然说淘宝的服务器很厉害,这个是公认的,但是他也会做相应的处理才可以满足用户满意的使用程度!

类似于这样需求是很多的,如果不做也可以,你说我们就是要响应快,我们的服务器牛逼,也是可以的。

这里多说一点,有的函数节流做的比较好的,其实是记录当前时间的,按照时间的间隔来判断用户是否可以点击这个函数,这个看需求吧,有这样的需求的时候我贴出来相应的例子!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uni-app实战之路-生命周期

    首先说一下什么是生命周期,不管是vue还是别的什么,生命周期说人话就是页面从初始化到销毁的整个过程被称为生命周期,vue的生命周期的话我帖子之前也没写过,也不知...

    何处锦绣不灰堆
  • uni-app实战之路-准备开始

    有人说了,这个太丑了,我们见过很多的小程序,最下面都是一些图标什么的,很漂亮,这里我们简单的说一下怎么引用,为什么不引用静态的,而是在线的,首先小程序的优势就是...

    何处锦绣不灰堆
  • 使用IIS服务搭建一个本地的局域网服务器-共享自己发布的网站

    IIS是什么我之前的文章写过了,有兴趣的可以看一下,我是在写搭建FTP服务器的时候写的,原文,这里就不介绍,今天说一下怎么搭建一个局域网的服务器。

    何处锦绣不灰堆
  • 敏捷项目需求拆解&发现用户故事

    需求文档和敏捷中的Epic,User Story, Task之间是什么关系以及如何将需求文档转换成敏捷方式的描述,指导开发人员。 一直是很多公司团队比较困扰的问...

    麦克-堂
  • 要你命三千:老代码中的那些坑 define STRHASSBUSTR(str,subStr) ...

    rectinajh
  • 专访马云:下一个星辰大海是百货商店(附访谈视频)

    大数据文摘
  • cloudera第三天

    DataScience
  • Asp.Net Core Web应用程序—探索

    作为一个Windows系统下的开发者,我对于Core的使用机会几乎为0,但是考虑到微软的战略规划,我觉得,Core还是有先了解起来的必要。

    Kiba518
  • 群友:谁帮我下个xx文库的文件 大佬:过来,我给你爬一下

    这几天在公众号Python交流群里有人问道XX文库怎么免费下载,心想着我也没研究过这个,不知道难不难,于是自己去抓了一下包。其实难度不是很大,只是包的数据比较多...

    Python进击者
  • 【LeetCode每日打卡】面试题56 - I. 数组中数字出现的次数

    一个整型数组 nums 里除两个数字之外,其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n),空间复杂度是O(1)。

    韩旭051

扫码关注云+社区

领取腾讯云代金券