极客观点
项目管理
HarmonyOS
Q：拖到intersectionRatio=0.5的地方，然后，5s内拖到intersectionRatio为0的地方，为什么5s后打印出来的ratio还是0.5，而不是0？代码可直接复制运行
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IntersectionObserver属性实例</title>
<style>
body{margin:0px;padding:0px;}
.containter{height:300px;overflow:auto;border:1px solid #ccc;margin:50px;}
.blank-area{padding-top:1000px;position:relative;}
.show-info{padding-bottom:10px;}
.demo-area{background-color:#aaa;height:100px;margin-top:50px;}
</style>
</head>
<body>
<div class="xms-demo-header tc">
<h1 class = "header-name">IntersectionObserver属性实例thresholds</h1>
</div>
<div id = "containter" class = "containter">
<div class = "blank-area">
下面是一个rootMargin:100px的元素，这里就会被触发哦。
<div id = "demoArea" class = "demo-area">IntersectionObserver区域</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function _observer(entries) {
const ratio = entries[0].intersectionRatio;
console.log('ratio = ' + ratio);
if (ratio >= 0.5) {
setTimeout(() => {
console.log('after 5s = ' + ratio)
}, 5 * 1000)
}
}
var observer = new IntersectionObserver(_observer, {
threshold: [.1, .15, .2, .25, .3, .35, .4, .45, .5, .55, .6, .65, .7, .75],
});
observer.observe($("#demoArea")[0]);
console.log(observer);
});
</script>
</body>
</html>
'5s内拖到intersectionRatio为0的地方',那5s前的值不还是0.5吗？你使用的是const，块作用域的闭包