节流函数
老师这个节流函数 每次执行节流函数不是都会先把上一次的时间戳赋值为null，
那 if语句中的判断 !lastEventTimestamp 不是就不起作用了吗？
正在回答
同学你好，同学的理解有些偏差。
具体解答如下：
这个例子中只会在第一次的时候将lastEventTimestamp赋值为null，再一次的时候lastEventTimestamp就会有值了（因为已经在if语句中进行重新赋值为now了）。所以if判断语句中!lastEventTimestamp这个条件自然就不会符合了，但是这里有个知识点。在if判断语句中条件1||条件2如果两个条件使用||（谁或谁），那么这里要注意，只要是条件符合这两个其中的某一个都会进入if语句中，如下图：
以上两个例子中只要是二者符合其中一条都会进入if语句，那么视频中老师讲的!lastEventTimestamp如果不成立了（不起作用了），但是后面的条件依然符合（起作用），那么依然还会进入if语句中。
同学看看是否能理解以上解释的内容，另建议同学再去视频中从13分51秒听一下，视频中老师梳理的代码流程。
祝学习愉快！
-
同学你好，解答如下：
1、同学所说的这种情况是，不停的使用scroll才会一直在节流函数中。
2、一般情况下这一块的逻辑是，当使用了scroll之后，调用节流函数，当节流函数执行完毕后就才可以再次使用scroll动作。那么再次执行scroll之后，还会按照上面的逻辑继续走一遍。（比如说不停地使用scroll则会是第一种情况，因为它一直不停，所以就不会在重新触发scroll）
同学尝试理解一下，祝学习愉快！
2022-02-11 16:13:26 -
老师，我的代码在第二种情况下好像有点问题，麻烦老师帮我看一看
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport'
content='width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0'>
<title>Document</title>
<style>
html {
height: 2000px;
}
.none {
display: none;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src='https://unpkg.com/vue@next'></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<button id="backTop" class="none">回到顶部</button>
<script>
const $bakcTop = document.getElementById('backTop');
//当window大小变化时重新获取；
let WH = window.innerHeight;
window.addEventListener('resize', () => {
WH = window.innerHeight;
//console.log(`innerHeight${window.innerHeight}`);
}, false);
window.addEventListener('scroll',
//节流
throttle(handler), false);
function handler() {
//console.log(document.documentElement.scrollTop);
if (document.documentElement.scrollTop >= WH) {
$bakcTop.classList.remove('none');
} else {
$bakcTop.classList.add('none');
}
console.log('scroll');
}
//节流函数:事件处理函数执行一次后，在某个时间期限内不再工作；
function throttle(fn, miliseconds = 250, context) {
//上一次事件触发的时间戳
console.log(1);
let lastEventTimestamp = null;
return function (...args) {
const self = context || this;
const now = Date.now();
// console.log(args);
if (!lastEventTimestamp || now - lastEventTimestamp >= miliseconds) {
lastEventTimestamp = now;
//在某个期限过后，才能执行下次的处理函数
fn.apply(self, args);
}
};
}
</script>
</body>
</html>
2022-02-11 19:26:15
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星