防抖和节流
Posted 提灯戏江鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了防抖和节流相关的知识，希望对你有一定的参考价值。
上一篇讲到惰性函数，这篇就做一个自己对节流和防抖的理解的整理。
其实节流和防抖也是使用惰性函数的原理的，赋一个初始值，然后第二次执行调用函数的跳过这个分支，如果不太清楚惰性函数的朋友可以去上一篇看一下。
我们先来讲节流
节流：就是指高频率触发事件的时候每隔一段时间只触发一次，
举个例子就是水龙头放水，我把水龙头阀门开大点，它很快速很持续的往下放水，但这样很浪费水资源，我想让它放慢点，频率低一点，然后我就把阀门开小一点，一滴水慢慢的积攒，等它到了一定的重量，才会自己掉下来。同样的，就类似于计算机内部的存储资源，我高频率的触发函数，很浪费计算机的资源，我想让他放慢一点，到达一定的时间才让他触发一次。
来个例子，我想要实现一个按钮点击之后控制台打印数据，但是我不想让他打印的那么快，我想让他一秒钟的间隔内无论如何点击都只能打印一次，下次打印的时候必须等两秒钟的时间到了才行
<body>
<div>0</div>
<button>点击</button>
<script>
var di = document.getElementsByTagName("div")[0]
var btn = document.getElementsByTagName("button")[0]
btn.onclick = thorttle(1000, test)
function test()
di.innerhtml = Number(di.innerHTML) + 1
console.log(111)
function thorttle(time, hanlder)
// 时间（只执行一次）
var timer = 0;
// 返回fn给点击事件
return function()
// 拿到现在的时间
var nowTime = new Date().getTime()
// 如果现在的时间与刚刚点击的时间间隔time秒
if (nowTime - timer >= time)
// 那么就调用函数
hanlder()
// 然后把现在的时间赋值给刚刚的时间
timer = nowTime;
</script>
</body>
可以看到这里面的var timer = 0;只执行了一次，下次点击的时候就调用返回的函数，然后上一次点击的时间跟现在点击的时间有没有经过一秒钟，如果有才可以打印一次，这个例子很简单，它只能大致的介绍一下节流的原理，但是不是很严谨，点击的时候这个程序还是执行了，我们只是没有让它打印而已。涉及到更高阶层的东西就很难用这个例子去解释。但是道理是相似的，其中的奥秘是相同的。
防抖；指高频率触发事件之后，在到达指定的时间之后，只执行最后一次，如果在指定时间之内又重新触发别的事件之后，那么指定时间发生改变，重新开始计时，直到到达了第二次重新计时的时间到达之后，执行最后一次。
举个例子：一个人用相机延迟拍照，三秒后开始给自己拍照，到了第二秒的时候，他女朋友突然来了，要跟他一起拍照片，然后他按下了暂停，重新开始摆pose凹造型，相机重新开始计时，新的三秒过后，相机开始拍照，拍下两个人最后一秒定格的动作。
来个案例：我想在输入框中不停的输入东西，等我停下来的时候，过一秒钟才在控制台打印出来输入框中的值，这个防抖经常用在某些浏览器的搜索框中，等你每一次输入完过了零点几秒钟才开始帮助你搜索
<body>
<input type="text">
<script>
var int = document.getElementsByTagName("input")[0]
int.oninput = dobounce(1000, test)
function test()
console.log(int.value)
function dobounce(time, hanlder)
// 初始值，永远只调用一次，这就是核心
var timrs = null;
// 返回fn给点击事件
return function()
clearTimeout(timrs)
// this对象赋给self变量
var self = this;
timrs = setTimeout(function()
hanlder()
, time)
</script>
</body>
防抖中也有惰性函数的影子，var timrs = null;只执行一次，然后返回新的函数给输入框，onipnut事件每一次键盘按下的时候都会触发，但是我们的输出结果仍然是符合要求的，原因就是因为用了防抖，每次按下键盘的时候都会触发，调用新函数，函数每次开始之前清楚一次定时器，时间一秒钟，一秒到了才开始打印输入框中现在存在的值，也就是最后的一次值。但是如果我第一次输入后，一秒钟还没到之前，我又重新输入，那么事件触发调用函数，立即清除上一次的定时器。重新开始计时，时间到了之后打印最后一次值。
以上是关于防抖和节流的主要内容，如果未能解决你的问题，请参考以下文章