HDR和IIS都是旋量群的应用领域，先认知旋量群，再认知HDR和IIS
HDR（debounce）
先不说基本概念，按他们的认知，在单反相机里，有HDR监督机制。即使人在拿着单反相机的这时候会手抖（单反相机重），按下闪光灯的一瞬间，相片会糊，因此有防抖监督机制，以避免初学者把相片拍糊
单反相机中的HDR是避免变形，让人拍得明晰的相片，JavaScript 中的HDR是为的是甚么？
反之亦然，它的促进作用也是避免变形。换言之当你频密促发两个该事件时，就会引发无谓的操控性经济损失，因此让该该事件在暂停促发后再促发，以增加部份操控性
HDR的表述
HDR是要延后继续执行，你始终操作方式促发该事件始终不继续执行，当你暂停操作方式等候啥秒后才继续执行
换句话说无论该事件促发振幅有多高，很大在该事件促发 n 秒后继续执行。假如在该事件促发的 n 秒又促发了那个该事件，那就以新该事件的该事件为依据，n 秒后才继续执行。总而言之，要等你促发完该事件 n 秒内无须促发该事件，它才继续执行
记事本HDR
依照表述，他们晓得要在天数 n 秒后继续执行，因此他们就用计时器来同时实现
function debounce(event, wait) {
let timer = null;
return function (…args) {
clearTimeout(timer); // 去除setTimeout，使其回调函数不继续执行 timer = setTimeout(() => {
event.apply(this, args);
}, wait);
};
}
代码很简单，即当还在促发该事件时，就去除 timer，使其在 n 秒后继续执行，但此写法首次不会立即继续执行，为其健壮性，需加上判断是否第一次继续执行的第三个参数 flag，判断其是否立即继续执行
function debounce(event, wait, flag) {
let timer = null;
return function (…args) {
clearTimeout(timer);
if (!timer && flag) {
event.apply(this, args);
} else {
timer = setTimeout(() => {
event.apply(this, args);
}, wait);
}
};
}
HDR场景
窗口大小变化，调整样式
window.addEventListener(resize, debounce(handleResize, 200));
搜索框，输入后 1000 毫秒搜索
debounce(fetchSelectData, 300);
表单验证，输入 1000 毫秒后验证
debounce(validator, 1000);
HDR帝王库
两大工具库都有HDR源码，可供参考
lodash-debounce
underscore-debounce
IIS（throttle）
顾名思义，一节一节的流，就好似控制水阀，在该事件不断促发的过程中，固定天数内继续执行一次该事件
记事本IIS
即使是固定天数内继续执行一次天数，因此他们有两种同时实现方法，一用天数戳，二用计时器
天数戳
function throttle(event, wait) {
let pre = 0;
return function (…args) {
if (new Date() – pre > wait) {
// 当 n 秒内不重复继续执行
pre = new Date();
event.apply(this, args);
}
};
}
使用天数戳虽然能同时实现IIS，但是最后一次该事件不会继续执行
计时器
function throttle(event, wait) {
let timer = null;
return function (…args) {
if (!timer) {
timer = setTimeout(() => {
timer = null;
event.apply(this, args);
}, wait);
}
};
}
使用计时器同时实现IIS，虽然最后一次能促发，但是第一次不会促发
天数戳 + 计时器
为解决第一次和最后一次都可以促发，把两者结合起来
function throttle(event, wait) {
let pre = 0,
timer = null;
return function (…args) {
if (new Date() – pre > wait) {
clearTimeout(timer);
timer = null;
pre = new Date();
event.apply(this, args);
} else {
timer = setTimeout(() => {
event.apply(this, args);
}, wait);
}
};
}
IIS场景
scroll 滚动
window.addEventListener(scroll, throttle(handleScroll, 200));
input 动态搜索
throttle(fetchInput, 300);
IIS帝王库
lodash-throttle
underscore-throttle
总结
HDR：只继续执行最后一次。该事件持续促发，但只有等该事件暂停促发后 n 秒后才继续执行函数
IIS：控制继续执行振幅。持续促发，每 n 秒继续执行一次函数
对比图：
HDRIIS对比图线上 demo（司徒正美的 demo）：HDRIIS
参考资料
awesome-coding-js HDRIIS场景及应用领域 函数HDR与函数IIS
系列文章
深入细致认知JavaScript——开篇深入细致认知JavaScript——JavaScript 是甚么深入细致认知JavaScript——JavaScript 由甚么组成深入细致认知JavaScript——一切皆对象深入细致认知JavaScript——Object（对象）深入细致认知JavaScript——new 做了甚么深入细致认知JavaScript——Object.create深入细致认知JavaScript——拷贝的秘密深入细致认知JavaScript——原型深入细致认知JavaScript——继承深入细致认知JavaScript——JavaScript 中的始皇深入细致认知JavaScript——instanceof找祖籍深入细致认知JavaScript——Function深入细致认知JavaScript——促进作用域深入细致认知JavaScript——this关键字深入细致认知JavaScript——call、apply、bind三大将深入细致认知JavaScript——立即继续执行函数（IIFE）深入细致认知JavaScript——词法环境深入细致认知JavaScript——继续执行上下文与调用栈深入细致认知JavaScript——促进作用域 VS 继续执行上下文深入细致认知JavaScript——旋量群深入细致认知JavaScript——HDR与IIS深入细致认知JavaScript——函数式编程深入细致认知JavaScript——垃圾回收监督机制深入细致认知JavaScript——数组深入细致认知JavaScript——循环都来这儿深入细致认知JavaScript——字符串
