Question

我试图在jquery移动页面上每隔10秒触发一次事件。但是setInterval（）似乎不起作用。即使在页面加载完成之前，也会显示alert（）。

这是我的代码

$(document).on("pageshow", function(event) {
  setInterval(update(), 10000);

  function update() {
    alert("Hey");
  }
});

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="page" id="chat">
  <div data-role="header">
    <a href="#panel1" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-gear">Options</a>
    <h1>Streamline Chat</h1>
    <a data-ajax="false" href="logout.php" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-power">Log Out</a>
  </div>
</div>

请帮忙吗？

Answer 1

您应该只将回调传递给setInterval

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

$(document).on("pageshow",function(event){
  setInterval(update, 1000);
function update() 
 { 
     console.info("Hey");
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Streamline Chat</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<div data-role="page" id="chat">
<div data-role="header">
<a href="#panel1" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-gear">Options</a>
<h1>Streamline Chat</h1>
<a data-ajax="false" href="logout.php" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-power">Log Out</a>
</div>
</div>
</body>
</html>

Answer 2

您可以从()

中删除update()中的setInterval进行检查

setInterval(update, 10000);
function update() { 
  alert("Hey");
 }
});

Answer 3

update

中的update()不是setInterval

$(document).on("pageshow",function(event){
setInterval(update, 10000);
function update() 
{ 
   alert("Hey");
}
});

Answer 4

相信这已经在上面得到了回答，但是为了将来的参考或其他任何阅读本文的内容，这里有一个小函数，我写这个函数使调用超时更加整洁：

功能：

function timeItOut(time, args, params1, params2){
    setTimeout(function(){
      // add more parameters as per your function with the most params
      args(params1, params2);
    }, time)
}

用法：

// Occurs after 4 seconds
timeItOut(4000, animateLights, device);

// Occurs after 7 seconds
timeItOut(7000, scrollScreen, 140);

显然你可以添加更多＆＃39; params＆＃39;对于timeItOut函数，这只是我在此脚本中使用的最大参数数。

Answer 5

尝试使用requestAnimationFrame

“为什么我们只创建一个setInterval？requestAnimationFrame有许多优点。也许最重要的一点就是当用户导航到另一个浏览器标签时它会暂停，因此不会浪费他们宝贵的处理能力和电池寿命。

function update() 
{ 
alert("Hey");
requestAnimationFrame(update);
}

参考requestAnimationFrame

Sample

Jquery移动中的setInterval无法正常工作

5 个答案: