我的代碼不能用於兩個設置間隔

我希望我的代碼使用moment.js獲取特定時間，將它與「幀」數相關聯，然後使用它填充網址以獲取序列中的指定圖像。然後該URL將以500ms的速率遍歷一系列圖像URL（它們是小圖像，如20k）。我用我的setInterval函數調用了getframe。我的代碼不能用於兩個設置間隔

但是爲了確保我的幀迭代器不會滯後很多，我還想運行另一個settime，它叫做gettime，它基於新的moment.js時間戳更新幀變量。我每10000ms運行一次。問題是我的代碼不能同時運行這兩個setIntervals。如果我將函數gettime設置爲setinterval，那麼它可以很好地工作，但是當我將它重新放回時會停下來，我無法弄清楚爲什麼？

歡迎關於如何更有效地實現gettime更新的建議，但是當涉及到我的jquery技能時，我非常受限（對不起），因此您必須在解釋爲什麼/如何做什麼時非常詳細工作..

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="three/js/moment.js"> </script> 
    <script src="three/js/jquery-2.0.3.js"></script> 
    <style> 
    .frames { position:relative; width:500px; height:332px; } 
    .frames img { position:absolute; left:0; top:0; } 
    </style> 
    <head> 

    <body> 

<img id ="frame_placeholder"> 

<script> 





    window.onload = $(function(){ 

    setInterval(gettime,10000); 

    setInterval(getframe,500); 

    function gettime(){ 
     now = moment().zone('-0500') 

     if (now.hour() >= 18) { 
     now = now.subtract('hour', 18).subtract('minute', 30) 
     } else { 
     now = now.add('hour', 6).add('minute', 30) 
     }; 

    var frame = ((now.hour() * 3600) + (now.minute() * 60) + now.second()) * 2; 


    }; 


    function getframe(){ 
     var framestr=frame.toString(); 
          function pad (str, max) 
          { 
           return str.length < max ? pad("0" + str, max) : str; 
          }; 

     framerun = pad (framestr,5); 

     var src = "https://s3.amazonaws.com/image"+ framerun +".jpg" 

     framerun1=parseInt(framerun) 
     $("#frame_placeholder").attr("src", src); 
     frame=framerun1+=1; 

    } 

    }); 






</script> 

    </body> 
    </html>

來源

2013-12-09 user3079080

你的控制檯說什麼？拋出任何錯誤？ gettime是否獨立運行（沒有getframe）？ – Pete

框架內沒有定義getframe（） –

jsFiddle Demo

您的變量的作用域是在這裏指責。 frame在本地範圍爲gettime，所以當它在getframe中使用時，幀未定義並且出現錯誤。這可以通過將框架變量放在onload函數內但gettime之外，通過從gettime中刪除框架的var，並通過在getframe中放置未定義的檢查來解決。

setInterval(gettime,10000); 
setInterval(getframe,500); 

var frame; 

function gettime(){ 
now = moment().zone('-0500'); 

if (now.hour() >= 18) { 
    now = now.subtract('hour', 18).subtract('minute', 30); 
} else { 
    now = now.add('hour', 6).add('minute', 30); 
} 
frame = ((now.hour() * 3600) + (now.minute() * 60) + now.second()) * 2; 
} 
function getframe(){ 
var framestr = frame? frame.toString() : ""; 
function pad (str, max){ 
    return str.length < max ? pad("0" + str, max) : str; 
} 
framerun = pad (framestr,5); 
var src = "https://s3.amazonaws.com/image"+ framerun +".jpg"; 
framerun1=parseInt(framerun); 
$("#frame_placeholder").attr("src", src); 
frame=framerun1+=1; 
}

來源

2013-12-09 15:55:17

真棒！這似乎是正確的軌道 - 現在的問題似乎是gettime在加載後等待運行約10秒（不知道這是因爲它等待一個間隔運行還是什麼？）等等框架沒有正確定義gettime的時間戳正確 – user3079080

也許我可以把gettime放在'onload'之前，是否有一些jscript命令可以使gettime優先於getframe？ – user3079080

@ user3079080 - 要立即運行，只需在onload函數結束時對其進行調用即可。 'gettime（）;' –

這並沒有真正回答你直接的問題，但如果你想動畫的東西來改變每半秒，你可能想使用的JavaScript Image對象預加載您的圖片：

var frames = []; 
var loadCount = 0; 
function preloadImages() { 
    for (var i = 0; i < TOTAL_FRAMES; i++) { 
    loadFrame("myurl" + i + ".jpg", i); 
    } 
} 

function loadFrame(url, frameNumber) { 
    var img = new Image(); 
    img.src = url; 
    img.onload(function() { 
    frames[frameNumber] = img; 
    loadCount++; 
    if (loadCount == TOTAL_FRAMES) { 
     startAnimation(); 
    } 
    }); 
}

基本上，這將遍歷所有圖像URL，下載它們並將它們存儲在一個數組中，然後在每個URL之後運行回調。如果所有圖像都已下載完畢，您的動畫就會啓動，您不必擔心從服務器加載圖像。此外，您的框架組織在一個數組中，當您運行動畫時，您可以簡單地遍歷它們。

來源

2013-12-09 16:00:22 RustyTheBoyRobot

感謝這個想法 - 你是對的，最好的方式是某種預加載陣列。問題是圖像的數量是巨大的 - 100,000（基本上我模擬一種停止動作電影），所以我不能把它們全部放入該陣列。我可能會嘗試創建某種動態循環，在每個圖像被調用後，它將被目錄中的新圖像替換，因此當它返回到循環中的那個點時，它實際上會在圖像序列中進一步顯示圖像，但不確定有編碼排序，以使其工作... – user3079080

我的代碼不能用於兩個設置間隔

回答

相關問題