应用场景：
首先是函数防抖：
1.需求：做一个搜索框，输入之后会调用接口获取联想词。如果用户每次输入一个字就调用一次接口，那样接口调用频率过高，显然不好，这个时候，函数防抖就是一个很好的解决方案，产生的效果是 只有在用户输入完毕的一段时间后，才会调用接口，获取联想词。
2.需求：一个提交按钮。在低配的机器上或者网络环境不好的情况下，暴躁老哥用户可能会高频点击提交按钮，产生多次不必要的提交，这时也是可以使用防抖，在用户多次点击按钮完毕了（你不点了）之后的一段时间，才执行提交操作。
然后是函数节流：
1.需求：滚动加载判断，一般来说要监听scroll事件，通过获取到的scrolltop，clientheight和scrollheight来计算判断是否加载，这样便会频繁触发scroll，造成资源损耗，这时便可以使用函数节流，产生的效果是指定时间间隔内只会执行一次监听事件。
2.需求：也是提交按钮。
二者的差别请到 这个页面 看下二者可视化的比较。
代码实现：
//函数防抖debouce
function debounce(fn, delay) {
let timerId = null;
return function () {
const context = this;
if (timerId) {
window.clearTimeout(timerId);
}
timerId = setTimeout(() => {
fn.apply(context, arguments);
timerId = null;
}, delay);
};
}
const debounced = debounce(() => {
console.log("hello");
});
debounced();
//函数节流throttle
function throttle(fn, delay) {
let canUse = true;
return function () {
if (canUse) {
fn.apply(this, arguments);
canUse = false;
setTimeout(() => {
canUse = true;
}, delay);
}
};
}
const throttled = throttle(() => {
console.log("hello");
}, 1000);
throttled();
然而在实际开发中并不需要手写防抖节流，可以直接使用三方库：lodash
