当元素第一次出现在可视范围内，提示并且只提示一次

问题

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 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的值就改变了，这个锁就锁上了.....

总结

要想对多个目标元素生效，就得想办法给出现过的元素添加一个她独有的标记，然后通过检查当前元素是否有这个独有的标记来判断她是否出现过。

就酱，如果有人刚好看到这个，刚好有其他的办法，欢迎交流~