rxjs的节流
2021-07-21 本文已影响0人
姜治宇
概述
节流是我们经常会用到的一个知识点，主要是针对高频事件而言，比如resize、scroll、keydown等，节流会降低触发频率，比如你一直按住输入框的某个键，如果不控制触发频率，这个keydown事件会很快将你的浏览器搞崩。
rxjs提供了很好用的api，我们可以直接用来做节流。
代码
我们用scroll滚动事件作为示例，使用节流的目的是降低滚动触发的频率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#listCont {
width: 100%;
height: 800px;
overflow: auto;
}
.item {
width: 100%;
height: 100%;
background: yellowgreen;
margin-bottom: 10px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/rxjs/7.2.0/rxjs.umd.min.js"></script>
</head>
<body>
<div id="listCont">
<div class="item"></div>
</div>
</body>
</html>
<script>
console.log(rxjs);
let node = document.getElementById('listCont');
rxjs.fromEvent(node, 'scroll').pipe(rxjs.operators.debounceTime(500)).subscribe(x => {
let scrollTop = node.scrollTop;
let offsetHeight = node.offsetHeight;
let scrollHeight = node.scrollHeight;
console.log(scrollTop, offsetHeight, scrollHeight);
if (scrollTop + offsetHeight >= scrollHeight) {
console.log('加载新数据');
loadMore();
}
});
function loadMore() {
let div = document.createElement('div');
div.className = 'item';
node.append(div);
}
</script>
