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