您的位置：首页 > 职场人生

ja面试 函数的节流和防抖

2020-06-26 04:24 639 查看 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
// 面试题：什么是函数节流？什么是函数防抖？
/*
函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次
有个需要频繁触发函数，处于优化性能角度，只让函数触发的第一次生效，后面不生效
*/
function throttle(fn, delay) {
//记录上一次函数触发的时间
let lastTime = 0;
return () => {
//记录当前函数触发的时间
let nowTime = Date.now()
if (nowTime - lastTime > delay) {
fn()
//同步时间
lastTime = nowTime
}
}
}

/*
防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效
*/
function debounce(fn, delay) {
//记录上一次的延时器
let timer = null
return () => {
//清除上一次延时器
clearTimeout(timer)
//重新设置新的延时器
timer = setTimeout(() => {
fn()
}, delay)
}
}

//作用：
/*
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，
以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
总结：
函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现
*/
</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航