Question

我想在每个警报之间设置5秒的间隔。找到了这个thread：

setInterval(function() {
    alert("Message to alert every 5 seconds");
}, 5000);

但是我在哪里放setInterval()以便每隔5秒发出警报？

$(window).scroll(function() {
    if (checkVisible($('#footer'))) {
        alert("I DONT SEE A FOOTER");
    } else {
        alert("EUREKA - I SEE A FOOTER");
    }
});

function checkVisible(elm, eval) {
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "visible") 
        return ((y < (vpH + st)) && (y > (st - elementHeight)));

    if (eval == "above") 
        return ((y < (vpH + st)));
}

非常感谢提前。

Answer 1

您可以输入加载功能

$(document).ready(function()
{
     setInterval(function() {
        alert("Message to alert every 5 seconds");
     }, 5000);
});

Answer 2

基本上你想每隔5秒发出警报，但如果你有一个页脚，也要每5秒检查一次？

然后你添加：

setInterval(function() {
             if (checkVisible($('#footer'))) { //check footer
                    alert("I DONT SEE A FOOTER");
                } else {
                    alert("EUREKA - I SEE A FOOTER");
                }
        }, 5000);

这将每隔5秒显示一次警报，如果你有一个页脚，该警报上的文字将取决于：）

但是你不想每次滚动时调用它（每个滚动运行大约12次，这不是你想要的）。所以你可以在加载时启动它，或者你可以像我一样完成并在你开始滚动时运行一次计时器。

所以我已经创建了一个设置间隔的函数：

 function showAlert() {
  setInterval(function() { 
  if (checkVisible($('#footer'))) {
      //alert("I DONT SEE A FOOTER");
      outputString = "EUREKA - I SEE A FOOTER";

    } else {
      //alert("EUREKA - I SEE A FOOTER");
      outputString = "I DONT SEE A FOOTER";
    }
    console.log(outputString)
  }, 5000);
}

在这里，我使用了console.log（）而不是警报，因为警报是诚实的，非常烦人。此计时器还会检查是否有页脚并相应地记录。

现在我添加了一个真实的bool，但是当滚动设置为false时，我只滚动一次运行上面的函数：

var runOnceScrolled = true;
$(window).scroll(function() {
  console.log('scrolled, timer will now start')
  if (runOnceScrolled) {
    showAlert();
    runOnceScrolled = false;
  }
});

我还在try catch中包含了checkVisible的内容，因为如果#footer不存在则会抛出错误。

我还添加了一个按钮，以插入ID为footer的div，这样您就可以在添加页脚后看到console.log（）更改。

$('#addFooter').click(function(d) {
  console.log('add footer')
  $("body").append("<div id='footer'>This is the footer</div>")
})

var outputString = "";

function showAlert() {
  setInterval(function() {
    if (checkVisible($('#footer'))) {
      //alert("I DONT SEE A FOOTER");
      outputString = "EUREKA - I SEE A FOOTER";

    } else {
      //alert("EUREKA - I SEE A FOOTER");
      outputString = "I DONT SEE A FOOTER";
    }
    console.log(outputString)
  }, 500);
}

console.log('outputString : ' + outputString)

var runOnceScrolled = true;
$(window).scroll(function() {
  
  if (runOnceScrolled) {
    console.log('scrolled, timer will now start')
    showAlert();
    runOnceScrolled = false;
  }
});

function checkVisible(elm, eval) {
  try {
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
      st = $(window).scrollTop(), // Scroll Top
      y = $(elm).offset().top,
      elementHeight = $(elm).height();

    if (eval == "visible")
      return ((y < (vpH + st)) && (y > (st - elementHeight)));

    if (eval == "above")
      return ((y < (vpH + st)));
  } catch (err) {
    //console.log(err)
  }
}

.outside {
  color: red;
  border: 1px solid black;
  position: absolute;
  height: 150%;
  width: 100px;
  overflow: scroll;
}

.inside {
  width: 100%;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='addFooter'>
  Add footer
</button>

<div id="outside">
  <div class='inside'></div>
  <div class='inside'></div>
  <div class='inside'></div>
</div>

工作小提琴：https://jsfiddle.net/reko91/xQacd/459/

Answer 3

每隔5秒重复一次，由滚动事件启动：

var myTimer;

function showAlert(inString){
    alert(inString);
    myTimer = setTimeout(function() {
        showAlert();
    }, 5000);
}

$(window).scroll(function() {
    clearTimeout(myTimer);
    if (checkVisible($('#footer'))) {
        showAlert("I DONT SEE A FOOTER");
    } else {
        showAlert("EUREKA - I SEE A FOOTER");
    }
});

你可以看到我使用clearTimeout(myTimer)删除了之前的计时器，这避免了我们多次启动计时器。为了实现这一点，我们必须先存储计时器 - 我已经在myTimer变量中完成了它。

滚动事件后显示5秒但仅显示一次：

function showAlert(inString){
    myTimer = setTimeout(function() {
        alert(inString);
    }, 5000);
}

$(window).scroll(function() {
    clearTimeout(myTimer);
    if (checkVisible($('#footer'))) {
        showAlert("I DONT SEE A FOOTER");
    } else {
        showAlert("EUREKA - I SEE A FOOTER");
    }
});

Javascript setInterval每5秒

3 个答案: