页面空闲时自动跳转到下一页答案

【问题标题】：Automatically move to next page if page is idle页面空闲时自动跳转到下一页
【发布时间】：2015-12-09 07:07:35
【问题描述】：

我正在开发一个 jquery 移动应用程序，我想要实现的是：当页面保持空闲 3 秒时，它应该自动从第 1 页移动到第 2 页，当您在第 2 页时它仍然保持空闲 3 秒秒它应该移动到 page3 等等等等第四。谁能帮我写一个脚本。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


</head>

<body>
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page1</h1>
  </div>
  <div data-role="content">This is page 1</div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
<p>&nbsp;
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div data-role="content">This is page 2</div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
</p>
<p>&nbsp;
<div data-role="page" id="page3">
  <div data-role="header">
    <h1>Page 3</h1>
  </div>
  <div data-role="content">This is page 3</div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
<p>&nbsp;
<div data-role="page" id="page4">
  <div data-role="header">
    <h1>Page 4</h1>
  </div>
  <div data-role="content">This is page 4</div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
</p>
</body>
</html>

这是我的页面的一个小提琴

http://jsfiddle.net/91wu20fr/

【问题讨论】：

闲置怎么定义？
我在你的小提琴上看不到 JS。您是否构建了路由和导航功能？

标签： jquery html

【解决方案1】：

你可以使用简单的setTimeout:

var goToNextPage = setTimeout(function () {
  location.href = 'page2.html';
}, 3000);

在 JavaScript 中：

$(function () {
  $(document).on("mousemove keypress", function () {
    clearTimeout(goToNextPage);
    goToNextPage = setTimeout(function () {
      location.href = 'page2.html';
    }, 3000);
  });
});

此脚本实质上是在鼠标移动或按键被按下时重置计时器。由于您使用的是手机，请将这两个替换为用户可以触发的所有事件，例如滚动、触摸、等等等等，这应该适合您。

【讨论】：

他正在使用 jQuery Mobile...所以“mousemove”和“keypress”可能不会做任何事情。
@Mottie 请看底部...阅读全文并发表评论。谢谢。
@Mottie Since you are using a mobile, replace those two with what all events the user can fire, like scroll, touch, blah blah and this should work for you.
LOL，当我添加评论时不存在
@Mottie 添加评论时，会显示Edited just now。由于没有显示，所以在您发表评论后我没有进行任何修改。