问题
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。
第一种情况：目标元素有多个
预览地址
控制台输出结果：
image.png
当窗口滚动时，这三个目标出现在可视范围内会在控制台打印出它的文本内容和true ，并且不管窗口怎么滚动只打印一次。
JS部分：
$(window).scroll(function () {
$node.each(function(){ // 用的时候把这里的$node替换成目标就可以了，上面链接里是$('.test')
if (isVisible($(this)) && ($(this).data('shown')) !== 'true') {
// 如果元素在窗口可视范围，并且自定义属性shown 的值不为true的时候，说明之前没有出现过，可以打印true
console.log($(this).text()+':true');
$(this).data('shown','true') // 元素在窗口可视范围出现后，我们给她加个自定义属性，做个标记
}
});
}); // 每次滑动，函数都会执行
function isVisible($node) { // 判断元素是否在可视范围内
var $nodePosition = $node.offset().top;
var $scrollDistance = $(window).scrollTop();
var $windowHeight = $(window).height();
if (($nodePosition >= $scrollDistance) && ($nodePosition <= ($scrollDistance + $windowHeight))) {
return true
}
return false
}
看到这个要求的时候，第一反应是这还不简单吗，加个状态锁就行了，可是实际操作并不行。于是就有了下面的第二种情况。
第二种情况： 目标元素只有一个
我们将JS部分改成如下代码，其他代码不变：
$(window).scroll(function () {
$($('.test')).each(function(){
if (isVisible($(this))&& shown !== true){
console.log('true');
console.log($(this).text()+':true');
shown = true; // 元素出现后，上锁
}
});
}); // 每次滑动，函数都会执行
var shown = false; // 状态锁
function isVisible($node) {
var $nodePosition = $node.offset().top;
var $scrollDistance = $(window).scrollTop();
var $windowHeight = $(window).height();
if (($nodePosition >= $scrollDistance) && ($nodePosition <= ($scrollDistance + $windowHeight))) {
return true;
}
return false;
}
控制台输出结果：
image.png
不管怎么滚动窗口，都只提醒一个元素一次，当对第一个出现的目标元素执行函数后，shown的值就改变了，这个锁就锁上了.....
总结
要想对多个目标元素生效，就得想办法给出现过的元素添加一个她独有的标记，然后通过检查当前元素是否有这个独有的标记来判断她是否出现过。
就酱，如果有人刚好看到这个，刚好有其他的办法，欢迎交流~
