javascript的防抖与节流
函数防抖：
将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
【触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间】
举例：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
函数节流：
使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
【高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率】
举例：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
参考：
https://github.com/mqyqingfeng/Blog/issues/26
https://mp.weixin.qq.com/s/Vkshf-nEDwo2ODUJhxgzVA
http://www.cnblogs.com/fsjohnhuang/p/4147810.html
https://mp.weixin.qq.com/s/3FZJ0nQLhj9PCi0pfBjc9A
防抖第一次立即执行：https://blog.crazyming.com/note/1020/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="aaa()">debounce 防抖 点完 一秒内不再点 就执行</button>
<button onclick="bbb()">节流(使劲点 但只会一秒钟 执行一次)</button>
</body>
<script>
var debounce = function(time, action) {
var last;
return function() {
var context = this,
args = arguments
clearTimeout(last);
last = setTimeout(function() {
action.apply(context, args);
}, time)
}
}
function fd() {
console.log("防抖啊啊啊啊~~")
}
var aaa = debounce(1000, fd);
var throttle = function(time, action) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
action.apply(context, args);
timer = null;
}, time);
}
}
}
function jl() {
console.log("节流啊 节流 ")
}
var bbb = throttle(1000, jl)
</script>
</html>
2019.6补充:
防抖 有两种实现方式计时器方式 和 时间戳方式 ,上方演示了计时器方式,时间戳方式如下:
function throttle2(fn, wait) {
var timeout;
return function () {
var _this = this;
var _arg = arguments;
if (!timeout) {
timeout = setTimeout(function () {
fn.apply(_this, _arg);
timeout = null;
}, wait)
}
}
}
比较两个方法：
第一种事件会立刻执行，第二种事件会在 n 秒后第一次执行
第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件
防抖demo地址:
http://case.crazyming.com?link=web/debounce
节流demo地址:
http://case.crazyming.com?link=web/throttle
版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/691/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。
东明兄
CrazyMing