Javascript 每 5 秒设置一次间隔

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

基本上你想每 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() 而不是警报，因为老实说，警报非常烦人。此计时器还会检查是否有页脚并相应地记录。

现在我添加了一个布尔值，它是 true 但是当滚动时设置为 false 所以我只运行滚动时上面的函数一次：

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

我还将您的 checkVisible 的内容包装在一个 try catch 中，因为如果 #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>

工作 fiddle：https://jsfiddle.net/reko91/xQacd/459/

Answer 2

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

Answer 3

可以放入加载函数

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

Javascript 每 5 秒设置一次间隔

Javascript setInterval every 5 seconds

javascript

jquery

setinterval