2017-03-17 73 views
-2

我想在jQuery手机页面上每10秒后触发一个事件。但是setInterval()似乎不起作用。即使在页面加载完成之前,alert()也会显示。setInterval在jquery移动不工作

这是我的代码

$(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>

任何帮助吗?

+0

它已经在工作同样的代码[这里](https://jsfiddle.net/p9h7d793/7/) – rahulsm

回答

2

内检查您只能回调传递给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>

1

您可以通过update()去除()setInterval

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

应该updateupdate()setInterval

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

相信这已经回答了上面的现在,而是将来的参考或其他任何人读这篇文章,这里是一个小功能,我写的,使呼叫超时点点整洁:

功能:

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

显然你可以在timeItOut函数中添加更多'params',这只是我在这个脚本中使用的最大参数数量。

0

尝试使用​​

“为什么我们只需要创建一个setInterval?​​有许多优点。也许最重要的是,它在用户导航到另一个浏览器选项卡,因此没有浪费自己宝贵的暂停处理能力和电池寿命。

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

requestAnimationFrame参见

Sample