写在前面
几天没有更新博客了,最近也没什么可忙的,今天我们说说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.几秒的延时操作的,你想象一下,很多人同时访问淘宝的时候,如果每个人的输入事件都是立刻响应的话,服务器的压力是有多大,虽然说淘宝的服务器很厉害,这个是公认的,但是他也会做相应的处理才可以满足用户满意的使用程度!
类似于这样需求是很多的,如果不做也可以,你说我们就是要响应快,我们的服务器牛逼,也是可以的。
这里多说一点,有的函数节流做的比较好的,其实是记录当前时间的,按照时间的间隔来判断用户是否可以点击这个函数,这个看需求吧,有这样的需求的时候我贴出来相应的例子!