先明白一个概念，防抖和节流的区别
防抖：疯狂点击，在设定的这个时间段内只会发送最后一次点击要求
节流：定时器设置的，在设定的时间间隔内只执行一次，循环进行
对于防抖的简单函数编写
<button id="debounce">点我防抖！</button> $(‘#debounce‘).on(‘click‘, function(){ let timer; return function () { clearTimeout(timer); timer = setTimeout(() => { console.log("防抖成功！"); }, 500); } });
防抖运用的方面之一，页面滚动监听，方法如下
function debounce(fn,delay) { let timer = null; return function () { let self = this, args = arguments; timer && clearTimeout(timer); timer = setTimeout(function () { fn.apply(self,args); },delay); } } window.onscroll = debounce(function () { let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log(‘滚动条位置：‘ + scrollTop); },200)
节流的简单函数编写
<button id="throttle">点我节流！</button> $(‘#throttle‘).on(‘click‘, throttle()); function throttle(fn) { let flag = true; return function () { if (!flag) { return; } flag = false; //此处设置的是一秒执行一次操作 setTimeout(() => { console.log("节流成功！"); flag = true; }, 1000); }; }
节流一遍用于对输入框的请求，百度的搜索框在我们输入的时候就节流的操作
<input type="text" value="" id="input"> $(‘#input‘).on(‘keyup‘, throttle(function () { console.log($(this).val()) }, 1000)); function throttle(fn, delay) { let flag = true; return function () { let self = this, args = arguments; if (!flag) { return; } flag = false; setTimeout(() => { fn.apply(self, args); flag = true; }, delay); } }