Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/377.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 设置间隔在Chrome上工作不正常_Javascript_Jquery_Setinterval - Fatal编程技术网

Javascript 设置间隔在Chrome上工作不正常

Javascript 设置间隔在Chrome上工作不正常,javascript,jquery,setinterval,Javascript,Jquery,Setinterval,我有一个定制的幻灯片对象来执行网站上名称指示的常规内容。除了在Chrome中切换选项卡并返回到“网站”选项卡外,一切都很好。当这种情况发生时,幻灯片会变得疯狂,并开始淡出图像,而忽略给定的setInterval间隔。找不到任何与此相关的内容,所以我想至少知道这是代码问题还是软件问题 下面是代码(与jQuery一起使用): $(函数(){ //幻灯片放映 var幻灯片放映={ id:错, 电流:0, 计数:0, 间隔:假, init:函数(数据){ 如果(!数据) 返回false; $.each(

我有一个定制的幻灯片对象来执行网站上名称指示的常规内容。除了在Chrome中切换选项卡并返回到“网站”选项卡外,一切都很好。当这种情况发生时,幻灯片会变得疯狂,并开始淡出图像,而忽略给定的
setInterval
间隔。找不到任何与此相关的内容,所以我想至少知道这是代码问题还是软件问题

下面是代码(与jQuery一起使用):

$(函数(){
//幻灯片放映
var幻灯片放映={
id:错,
电流:0,
计数:0,
间隔:假,
init:函数(数据){
如果(!数据)
返回false;
$.each(数据,$.proxy(
函数(索引、值){
此[索引]=数据[索引];
},本页)
);
this.count=this.images.length;

对于(x=1;x最有可能的情况是,你不应该期望setInterval是准确的。如果我是你,我会通过比较之前的间隔时间和当前的间隔时间来检查间隔是否正确。这会使代码更加健壮。

Chrome(显然还有最新版本的Firefox)当选项卡位于后台时,降低
setInterval
的速度,以提高前台性能。当后台页面中有快速运行的计时器驱动动画时,这可能最为重要。当页面返回前台时,它会“尝试”为了赶上并运行一系列
setInterval
调用,它们的运行速度比正常运行时快得多

解决办法是:

  • 延长
    setInterval
    的时间,这样Chrome就不会弄乱它(您必须查看该时间是多少)
  • 当页面进入后台时停止间隔计时器(当页面不可见时,无需运行幻灯片)-然后当页面进入前台时再次启动
  • 使用重复的
    setTimeout
    而不是
    setInterval
    进行重复的setTimeout,如下所示:
  • 代码:

    function nextSlide() {
        // show next slide now
        // set timer for the slide after this one
        setTimeout(function() {
            nextSlide();       // repeat
        }, xxx)
    }
    

    类似的帖子。

    与使用setInterval()相比,我更喜欢反复使用setTimeout()-setInterval()可能会出现很多问题,你不知道浏览器有多忙,也不知道间隔是否真实

    浏览器不会严格遵守您选择的超时或间隔。这主要是为了安全;以防止大量事件干扰浏览器的正常功能。例如,Chrome更适合更准确地遵守计时器,尽管当标签位于后台()时,它仍然会显着降低计时器的速度

    如果在现有的slideshow.action()调用过程中使用setTimeout设置了新计时器,那么当浏览器无法跟上时,事件将不会排队,但当浏览器能够跟上时,事件仍会快速进行


    您仍然可以使用计时器ID停止计时器,该ID将经常更改。

    chrome也存在类似问题

    因为我已经解决了这个问题。 开始时,记下mktime变量,然后从当前时间中简单地减去。示例:

    var values = {};
    
    function mktime(){
     var date = new Date();
     return Math.floor(date.getTime()/1000);
    }
    function getTime(string){
      var splitContent = string.split(/\:/g);
      var hours = parseInt(splitContent[0]) * 60 * 60;
      var minutes = parseInt(splitContent[1]) * 60;
      var seconds = parseInt(splitContent[2]);                          
      return hours + minutes + seconds;
    }
    function startTimer(time){
    
     values.startMkTime = mktime();
     values.startTime = getTime(time);
     setInterval(process(),1000);                       
    }
    
    function process(){
       values.currentTime = (mktime() - values.startMkTime) +       o.values.startTime;//new code
    }
    
    尝试了
    setTimeout()
    但没有成功。即使我告诉脚本区分时间戳并调整间隔(使用
    console.log
    我可以看到它从未更改,这让我相信Chrome冻结了选项卡进程或其他东西),Chrome选项卡的问题仍然会发生。请参阅此答案:
    setInterval(process(),…)
    将尝试执行
    process
    的返回值,这几乎肯定不是您想要的。
    setInterval
    将函数引用作为其第一个参数(或字符串,但在此处不重要)。
    var values = {};
    
    function mktime(){
     var date = new Date();
     return Math.floor(date.getTime()/1000);
    }
    function getTime(string){
      var splitContent = string.split(/\:/g);
      var hours = parseInt(splitContent[0]) * 60 * 60;
      var minutes = parseInt(splitContent[1]) * 60;
      var seconds = parseInt(splitContent[2]);                          
      return hours + minutes + seconds;
    }
    function startTimer(time){
    
     values.startMkTime = mktime();
     values.startTime = getTime(time);
     setInterval(process(),1000);                       
    }
    
    function process(){
       values.currentTime = (mktime() - values.startMkTime) +       o.values.startTime;//new code
    }