先上结论：
防抖 ：只执行最后一次 (常用语输入框) 节流： 控制执行的次数 （常下拉滚动条时进行数据请求） 防抖代码： （这是未封装的，防抖代码和业务代码写在一起了）<body>
<input type="text" />
<script>
// 防抖：用户触发事件过于频繁，只要最后一次事件的操作
let inp = document.querySelector('input')
//定义全局变量 t
let t = null
inp.oninput = function () {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
console.log(this.value)
}, 500)
}
</script>
</body>
这是封装后的，同时利用了闭包：
<body>
<input type="text" />
<script>
let inp = document.querySelector('input')
inp.oninput=debounce(function(){
console.log(this.value);
},500)
// 封装防抖函数
//fn 为传入的业务逻辑 delay 为延迟时间
function debounce(fn,delay){
let t = null;
return function () {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
// 使用call 改变 this的指向 如果不更改的话，再上面调用的 this.value 中this 指向为window
fn.call(this);
}, delay)
}
}
</script>
</body
节流代码：（这是未封装的，防抖代码和业务代码写在一起了）
<style>
body {
height: 2000px;
}
</style>
<script>
// 节流 控制执行的次数
let flag =true
window.onscroll=function(){
if(flag){
setTimeout(()=>{
console.log("hello world");
flag=true
},500)
}
flag =false
}
</script>
和防抖类似，也进行了封装，代码如下：
<style>
body {
height: 2000px;
}
</style>
<script>
window.onscroll = throttle(function () {
console.log('hello world')
}, 500)
function throttle(fn, delay) {
let flag = true
return function () {
if (flag) {
setTimeout(() => {
flag = true
// 使用call 改变 this的指向
fn.call(this)
}, delay)
}
flag = false
}
}
</script>
这里解释一下flag 的作用。按照执行顺序讲下吧，从上到下分别为（1 2 3）：
（先执行的）第一个 let flag = true； 先定义flag,用来判断使用运行定时器。相信都看得懂，废话不多说。
（第二执行）第三个 调用定时器之后，需要将 flag 暂时定义为 flag 避免短时间再次触发定时器。
（第三个执行的） 第二个 先讲下，为啥第二个最后一个执行，这是因为 js 的同步与异步。 js会先执行同步任务，碰到异步任务 会加到 另外一个线程（只是这样解释，其实不是） 等待其运行结束后，再进行调用。要是不明白，可以先去百度搜索下，同步与异步 的概念。
这样的话，在定时器 运行结束后，flag 就被改为了 true 用来等待 下次激活使用。
如有解释不对的地方，还望指正。
标签：function,防抖,节流,js,delay,flag,let,true From： https://www.cnblogs.com/zy-feng/p/16819631.html