javascript - jQuery：每次元素在页面上可见时仅触发一次

Question

这个问题基于这个优秀的 StackOverflow 元素可见性检测脚本：

检查滚动后元素是否可见

使用上面的脚本，我能够正确检测页面上何时可见元素（通过滚动到它），然后触发警报。我无法从上面的脚本中看到代码的不同之处在于，我希望每次元素可见时只触发一次警报。使用下面的 jsFiddle 代码，当元素可见时，每次滚动鼠标或滚动条都会继续触发警报：

http://jsfiddle.net/Berklie/JnFqu/

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
  var myelement = $('#overdueWarning');

  if (isScrolledIntoView(myelement)) {
    alert('Your book is overdue');
  }
});

我想要的是警报仅在元素变得可见时触发一次......然后仅在元素变得不可见时再次触发，然后再次可见。

请让我知道我是否可以提供其他任何东西。谢谢！

伯克利

Answer 1

jsFiddle 工作演示

var shown = false;
$(window).scroll(function () {
    var myelement = $('#overdueWarning');
    if(isScrolledIntoView(myelement)){
        if(!shown){
         console.log('Your book is overdue');
        }
         shown = true;
    }
    else{
     shown = false;
    }
});