请教一个新手问题

kwolfmsdn 2013-10-25 03:10:38
最近在学习CANVAS+JS游戏制作
写了一个测试程序
结果在页面正常显示的时候没有问题
可是一旦浏览器切换到其他tab页或者把浏览器最小化
画面就暂停不动了
有什么办法能够实现
在这种情况下
还是能够继续运行
即使draw不再描画
至少update要继续更新数据

谢谢了



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

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

    <link rel="icon" href="./image/favicon.ico" type="image/x-icon" />

    <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon" />

    <!--[if IE]>

    <script src="./js/jquery-1.10.2.min.js"></script>

    <![endif]-->

    <!--[if !IE]><!--> 

    <script src="./js/jquery-2.0.3.min.js"></script>

    <!--<![endif]-->

    <script src="./js/main.js"></script>

    <title>test</title>

  </head>

  <body>

    <div id="main">

      <canvas id="mainC"></canvas>

    </div>

  </body>

</html>






$(function()

  {

    init();

    window.requestAnimFrame = (function(){

      return  window.requestAnimationFrame       ||

              window.webkitRequestAnimationFrame ||

              window.mozRequestAnimationFrame    ||

              function( callback ){

                window.setTimeout(callback, 1000 / 60);

              };

    })();

    (function animloop(){

      update();

      draw();

      requestAnimFrame(animloop);

    })();

  }

);



function init()

{

  $("body").css("background","#000000");

  $("body").css("overflow-x","hidden");

  $("body").css("overflow-y","hidden");

  var h=$(window).height();

  var w=$(window).width();

  $("#main").css("background","#FFFFFF");

  $("#main").css("position","absolute");

  $("#main").height(480);

  $("#main").width(640);

  $("#main").css("left",(w/2-320));

  $("#main").css("top",(h/2-240));

  $("#mainC").height(480);

  $("#mainC").width(640);

  $(window).resize(function(){

    var h=$(window).height();

    var w=$(window).width();

    if(h<=480)

    {

      $("#main").css("top",0);

    }

    else

    {

      $("#main").css("top",(h/2-240));

    }

    if(w<=640)

    {

      $("#main").css("left",0);

    }

    else

    {

      $("#main").css("left",(w/2-320));

    }

  });

};



var a=0;

var p=0;



function update()

{

  if(p==0)

  {

    a++

    if(a>=100000000)

    {

      a=0;

    }

  }

};



function draw()

{

  var c=document.getElementById("mainC");

  var cxt=c.getContext("2d");

  cxt.clearRect(0,0,640,480);

  if(p==0)

  {

    cxt.fillText("鼠标点击暂停计数",50,15);

  }

  else

  {

    cxt.fillText("鼠标点击恢复计数",50,15);

  }

  cxt.fillText(a,50,50);

};



document.onmousedown = function(e)

{

  if(p==0)

  {

    p=1;

  }

  else

  {

    p=0;

  }

};



document.onmouseup = function(e)

{

  

};



document.onmousemove = function(e)

{

  

};



document.onkeydown = function(e)

{

  

};



document.onkeyup = function(e)

{

  

};



function get()

{

  

};



function post()

{

  

};
...全文
183 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
kwolfmsdn 2013-10-28
  • 打赏
  • 举报
 回复
引用 7 楼 KK3K2005 的回复:
好像是谷歌浏览器吧 会把js的执行停止掉 他停了你也没办法 不然就 根据时间来播放动画
的确 谷歌浏览器 和 火狐浏览器 都会把JS在后台停掉 Apple浏览器不会停掉 有什么解决方法吗？
kwolfmsdn 2013-10-28
  • 打赏
  • 举报
 回复
引用 13 楼 KK3K2005 的回复:
[quote=引用 12 楼 kwolfmsdn 的回复:] [quote=引用 7 楼 KK3K2005 的回复:] 好像是谷歌浏览器吧 会把js的执行停止掉 他停了你也没办法 不然就 根据时间来播放动画
的确 谷歌浏览器 和 火狐浏览器 都会把JS在后台停掉 Apple浏览器不会停掉 有什么解决方法吗？[/quote] 基于时间的刷新 假定你是类似mvc的显示方式 渲染是根据数据来的 （所以渲染不用动） 例如 有个update方法在不断更新你的m 数据 那么你应该在update的时候检查2次调用的时间间隔 根据时间差来更新数据[/quote] 谢谢
KK3K2005 2013-10-28
  • 打赏
  • 举报
 回复
引用 12 楼 kwolfmsdn 的回复:
[quote=引用 7 楼 KK3K2005 的回复:] 好像是谷歌浏览器吧 会把js的执行停止掉 他停了你也没办法 不然就 根据时间来播放动画
的确 谷歌浏览器 和 火狐浏览器 都会把JS在后台停掉 Apple浏览器不会停掉 有什么解决方法吗？[/quote] 基于时间的刷新 假定你是类似mvc的显示方式 渲染是根据数据来的 （所以渲染不用动） 例如 有个update方法在不断更新你的m 数据 那么你应该在update的时候检查2次调用的时间间隔 根据时间差来更新数据
浴火_凤凰 2013-10-25
  • 打赏
  • 举报
 回复
引用 8 楼 ForeverCjl 的回复:
requestAnimationFrame 这个方法允许浏览器做更多的优化处理，包括在tab处于后台或移动设备电量过低时停止进程。所以它在后台是不执行的。如果你想tab处于后台还可以执行，使用setTimeout即可。
貌似就是这个问题。
foreverpx 2013-10-25
  • 打赏
  • 举报
 回复
<script type="text/javascript"> var i = 0 ; function a(){ console.log(i++) setTimeout("a()",1000); } a(); </script> 你试试这段代码。我切换到别的tab或者最小化，控制台的数字还是在增加啊。。
kwolfmsdn 2013-10-25
  • 打赏
  • 举报
 回复
引用 8 楼 ForeverCjl 的回复:
requestAnimationFrame 这个方法允许浏览器做更多的优化处理，包括在tab处于后台或移动设备电量过低时停止进程。所以它在后台是不执行的。如果你想tab处于后台还可以执行，使用setTimeout即可。
换成setTimeout也不行 

$(function()
  {
    init();
    aaaa();
  }
);

function aaaa()
{
  update();
  draw();
  setTimeout("aaaa()", 1000 / 60);
}

function init()
{
  $("body").css("background","#000000");
  $("body").css("overflow-x","hidden");
  $("body").css("overflow-y","hidden");
  var h=$(window).height();
  var w=$(window).width();
  $("#main").css("background","#FFFFFF");
  $("#main").css("position","absolute");
  $("#main").height(480);
  $("#main").width(640);
  $("#main").css("left",(w/2-320));
  $("#main").css("top",(h/2-240));
  $("#mainC").height(480);
  $("#mainC").width(640);
  $(window).resize(function(){
    var h=$(window).height();
    var w=$(window).width();
    if(h<=480)
    {
      $("#main").css("top",0);
    }
    else
    {
      $("#main").css("top",(h/2-240));
    }
    if(w<=640)
    {
      $("#main").css("left",0);
    }
    else
    {
      $("#main").css("left",(w/2-320));
    }
  });
};

var a=0;
var p=0;

function update()
{
  if(p==0)
  {
    a++
    if(a>=100000000)
    {
      a=0;
    }
  }
};

function draw()
{
  var c=document.getElementById("mainC");
  var cxt=c.getContext("2d");
  cxt.clearRect(0,0,640,480);
  if(p==0)
  {
    cxt.fillText("鼠标点击暂停计数",50,15);
  }
  else
  {
    cxt.fillText("鼠标点击恢复计数",50,15);
  }
  cxt.fillText(a,50,50);
};

document.onmousedown = function(e)
{
  if(p==0)
  {
    p=1;
  }
  else
  {
    p=0;
  }
};

document.onmouseup = function(e)
{
  
};

document.onmousemove = function(e)
{
  
};

document.onkeydown = function(e)
{
  
};

document.onkeyup = function(e)
{
  
};

function get()
{
  
};

function post()
{
  
};
foreverpx 2013-10-25
  • 打赏
  • 举报
 回复
requestAnimationFrame 这个方法允许浏览器做更多的优化处理，包括在tab处于后台或移动设备电量过低时停止进程。所以它在后台是不执行的。如果你想tab处于后台还可以执行，使用setTimeout即可。
KK3K2005 2013-10-25
  • 打赏
  • 举报
 回复
好像是谷歌浏览器吧 会把js的执行停止掉 他停了你也没办法 不然就 根据时间来播放动画
kwolfmsdn 2013-10-25
  • 打赏
  • 举报
 回复
没……百度自学中~~
u010203057 2013-10-25
  • 打赏
  • 举报
 回复
没找找书看吗？？？ http://www.amazon.cn/HTML5-Canvas%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF-%E5%9B%BE%E5%BD%A2-%E5%8A%A8%E7%94%BB%E4%B8%8E%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91-David-Geary/dp/B00COFY5SC/ref=sr_1_1?s=books&ie=UTF8&qid=1382686138&sr=1-1&keywords=CANVAS
kwolfmsdn 2013-10-25
  • 打赏
  • 举报
 回复
引用 3 楼 u010203057 的回复:
[quote=引用 2 楼 kwolfmsdn 的回复:] [quote=引用 1 楼 u010203057 的回复:] 帮顶一下下
这么好笑吗[/quote] 就是帮你顶一下，我根本没学过你那个东西。！！！！[/quote] 谢谢
u010203057 2013-10-25
  • 打赏
  • 举报
 回复
引用 2 楼 kwolfmsdn 的回复:
[quote=引用 1 楼 u010203057 的回复:] 帮顶一下下
这么好笑吗[/quote] 就是帮你顶一下，我根本没学过你那个东西。！！！！
kwolfmsdn 2013-10-25
  • 打赏
  • 举报
 回复
引用 1 楼 u010203057 的回复:
帮顶一下下
这么好笑吗
u010203057 2013-10-25
  • 打赏
  • 举报
 回复
帮顶一下下
Web前端的学习路线 20160909
Web前端的学习路线思维导图 学习web前端开发该怎么学，按照什么顺序学习，这是很多新手朋友会遇到的问题。 想做好一件事，必须要花费一些功夫，然后是多学、多思、多练、多交流、多总结，发现自己的问题，然后一定要克服，在状态不好的情况下，往往要及时调整。新手学习前端的话，一定要想想为什么要学习它，是出于一种什么心态，然后定位好自己，多向大牛请教，多教一些没有自己水平高的人，那样往往能让自己成长的快，切勿急躁。 初学可以看一些入门视频教程，查阅一些图文参考手册，之后可以买一些书，做一些小项目，要学会投资，分析自己的现状及能力，实时调整，一定要有自己的想法，懂得创新。在这里一定要对自己做分析，然后找出一种适合的学习方法。
如何计算变压器电感量？
比如新手工程师张三对于开关电源变压器的计算还没有很好的理解，去请教李四和王五，然后李四给了一套计算公式给张三，王五也给了一套计算公式给张三。然后张三分别按照两个人给的公式兴致勃勃的算了起来，算出来之后，发现两套公式计算出来的电感量根本不相同，且相差了不少，到底是李四对还是王五对？ 　　我设计开关电源也有一些年份了，接触开关电源的新手也比较多，而新手问得多的一个问题就是变压器怎么计算，而变压器计算中问得多的一个问题就是，上面提到的感量不一样的问题。我可以这么说，只要有这个疑问的电源工程师，那么一定说明你是新手，一定没有掌握变压器的设计方法。其实两个工程师计算出来的电感量不相同是很正常的，我甚至
巧用DOS命令把系统看个透
假如你的电脑出了问题，在线向各路高手请教时，免不了要被问一些CPU是什么、BIOS版本是什么、操作系统是什么、内存多大、安装过什么补丁之类的问题，如果你是新手，可能一下子还真回答不上来。没关系，这里教你一招。只要一个DOS命令就可以把有关系统的这些情况摸个清。
我要的Excel散点图效果
请问这种散点图效果可以实现吗? 这是新手的时候为请教问题上传的一张图，没有什么技术含量，没必要下载
ANSYS参数化建模的几个命令流
就几个自己练习的例子，需要的可以来逛逛，我是新手，希望可以向高手请教，谢谢！！！
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章