共计 1446 个字符，预计需要花费 4 分钟才能阅读完成。
函数节流（throttle）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Throttle</title>
<style>
html,
body {
height: 500%;
/* 让其出现滚动条 */
}
</style>
</head>
<body>
<script>
// 函数节流：函数在执行一次后，只有在大于设定的执行周期之后才会执行第二次
/*
其原理是用 时间戳 来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；用到了闭包的特性，可以使变量 lastTime 的值长期保存在内存中。*/
function throttle(fn, delay) {
// 记录上一次函数触发的时间
let lastTime = 0
return function () {
// 记录当前函数执行时间
let nowTime = Date.now()
if(nowTime - lastTime > delay){
// 修正 this 指向问题
fn.call(this)
// 同步时间
lastTime = nowTime
}
}
}
function fn(){console.log('scroll 事件被触发了' + Date.now())
}
document.onscroll = throttle(fn, 2000)
</script>
</body>
</html>函数防抖（debounce）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Debounce</title>
</head>
<body>
<button id="btn"> 按钮 </button>
<script>
/*
防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。实现原理：第一次调用函数，创建一个定时器，在指定的时间间隔之后运行
第二次调用该函数，清除前一次的定时器，并设置另一个
如果前一个定时器已经执行过了，这个操作就没有任何意义
如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行
*/
function debounce(fn, delay){
// 记录上一次的延时器
let timer = null
return function(){
// 清除上一次的定时器
clearTimeout(timer)
timer = setTimeout(()=>{fn()
}, delay)
}
}
function fn() {console.log('点击事件被触发' + Date.now())
}
document.getElementById('btn').onclick = debounce(fn, 2000)
</script>
</body>
</html>
正文完
发表至： javascript
2019-10-29
