javascript - jQuery:当一个元素在页面上可见时，仅触发一次函数

Question

这个问题基于这个出色的 StackOverflow 元素可见性检测脚本:

Check if element is visible after scrolling

使用上面的脚本，我能够正确地检测到元素何时在页面上可见(通过滚动到它)，随后触发警报。我无法从上面的脚本编写代码的区别在于，我希望每次元素可见时警报只触发一次。使用以下 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 Working Demo

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;
    }
});