2021-9-29 前端达人
目录
函数防抖：在频繁触发某一个事件时，一段时间内不再触发该事件后才会去调用对应的回调函数，在设定间隔时间内如果下一次事件被触发， 那么就重新开始定时器，直到事件触发结束。
规定时间内没有继续触发事件的前提下，再去调用事件处理函数；
具体如下面的例子所示：
-
/*定义防抖函数
-
* func：传入一个函数，事件不再持续触发时会调用该函数
-
* delay:定义持续多久后执行传入的回调函数
-
* */
-
function debounce(func,delay) {
-
let timer = null // 用于保存定时器
-
return function (...args) {
-
// 如果定时器存在，清除定时器，随后重新设置timer
-
if(timer !== null) clearTimeout(timer)
-
timer = setTimeout(func, delay) // 超过delay为接收到事件会调用这里的func 必要的额时候可以修改func的this指向 由于timer对外部存在引用，因此不会被销毁
-
}
-
}
-
-
/*事件处理函数*/
-
function testDeBounce(){
-
console.log('你看我执行了几次？？')
-
}
-
-
// 接收debounce返回的函数
-
const temp = debounce(testDeBounce(),1000)
-
-
/*绑定事件，测试防抖函数*/
-
window.addEventListener('scroll',()=>{
-
temp()
-
}); // 这样写最少调用一次事件处理函数，最多也不会多余下面的写法执行的次数
-
window.addEventListener('scroll', testDeBounce); // 如果这样写的话，每当页面滚动就会调用事件处理函数
总结一下思路：
1.定义一个节流函数
2.函数内部使用一个变量保存定时器
3.返回一个函数，函数内部定义：如果定时器已经存在就清除定时器，重新设置定时器
4.定义一个变量来接收debounce返回的函数
5.在事件的回调函数中直接调用上一步的变量接收的方法
函数节流：在事件持续触发的前提下，保证一定时间段内只调用一次事件处理函数，就是函数节流；
函数节流实现的方式：定时器、时间戳、定时器+时间戳；
思路：
1.定义节流函数throttle
2.定义timer保存定时器
3.返回一个函数。函数内部定义：如果定时器不存在，设置定时器，间隔某一时间后将timer设置为null，如果在这之前事件再次触发，则定时器中的回调无效
<button>这是一个孤独的按钮</button>
-
/*
-
* 定义定时器节流函数
-
* func:传入事件处理函数
-
* delay：在delay指定的时间内定时器回调无效
-
* */
-
function throttle(func,delay) {
-
let timer = null
-
const context = this
-
return function(...args){
-
// 如果定时器不存在
-
if(!timer){
-
timer = setTimeout(()=>{
-
func.apply(context,args) // 考虑返回的函数调用的环境，因此这里不直接使用this
-
timer = null // delay之后清除定时器
-
},delay)
-
}
-
}
-
}
-
-
function test() {
-
console.log('啊啊啊！')
-
}
-
-
const temp = throttle(test,1000)
-
-
document.querySelector('button').addEventListener('click',()=>{
-
temp()
-
})
-
var throttle = function(func, delay) {
-
var prev = Date.now();
-
return function() {
-
var context = this;
-
var args = arguments;
-
var now = Date.now();
-
if (now - prev >= delay) {
-
func.apply(context, args);
-
prev = Date.now();
-
}
-
}
-
}
-
-
function handle() {
-
console.log(Math.random());
-
}
-
-
window.addEventListener('scroll', throttle(handle, 1000));
-
// 节流throttle代码（时间戳+定时器）：
-
var throttle = function(func, delay) {
-
var timer = null;
-
var startTime = Date.now();
-
return function() {
-
var curTime = Date.now();
-
var remaining = delay - (curTime - startTime);
-
var context = this;
-
var args = arguments;
-
clearTimeout(timer);
-
if (remaining <= 0) {
-
func.apply(context, args);
-
startTime = Date.now();
-
} else {
-
timer = setTimeout(func, remaining);
-
}
-
}
-
}
-
-
function handle() {
-
console.log(Math.random());
-
}
-
-
window.addEventListener('scroll', throttle(handle, 1000));
想跟博主交朋友的可以查找，公_号❤：前端老实人，跟博主一起探讨学习哦❤
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com