麻煩的setInterval和setTimeout的工作

這使用Raphaeljs從數組中繪製一個弦：麻煩的setInterval和setTimeout的工作

function createChordStruct(key, string, shape) { 
    var string = string.toUpperCase(); 
    var position = positions[string][key]; 
    var struct = chord_shapes[shape]; 

return { 
    name: key + struct.name, 
    chord: struct.chord, 
    position: position, 
    position_text: struct.position_text, 
    bars: struct.bars 
    } 
} 

function createChordElement(chord_struct) { 
    var chordbox = $('<div>').addClass('chord'); 
    var chordcanvas = $('<div>'); 
    var chordname = $('<div>').addClass('chordname'); 

chordbox.append(chordcanvas); 
chordbox.append(chordname); 
chordname.append(chord_struct.name); 


var paper = Raphael(chordcanvas[0], 150, 140); 
var chord = new ChordBox(paper, 30, 30); 

chord.setChord(
    chord_struct.chord, 
    chord_struct.position, 
    chord_struct.bars, 
    chord_struct.position_text); 
chord.draw(); 

return chordbox; 


} 

function createSectionElement(section_struct) { 
    var section = $('<div>').addClass('section'); 
    var section_title = $('<div>').addClass('title'); 
    var section_desc = $('<div>').addClass('description'); 

    section.append(section_title); 
    section.append(section_desc); 
    section_title.append(section_struct.section); 
    section_desc.append(section_struct.description); 

    return section; 

}

而這需要來自陣列創建的每個和絃，並把它們放在一個名爲「chordscroller」新的div：

function c_i() { 


var randomholder = 'id_' + (Math.floor(Math.random() * 100005) + 1); 
var randomId = 'id_' + (Math.floor(Math.random() * 100005) + 1); 
$(function() { 
    $('#sortable').append($('<li id ="' + randomholder + '" class="chordbox"><span id="i"  class="scale">C - I</span><span id="' + randomId + '" class=" even scrollpane chordscroller"></span></li>').sortable("refresh")) 
    }); 


function c_one() { 
    var container = $("#" + randomId + ""); 
    var column = null; 
    var column = _.shuffle(c_1); 


for (var i = 0; i < column.length; ++i) { 
    var section_struct = column[i]; 
    var section = createSectionElement(section_struct); 

    for (var j = 0; j < section_struct.chords.length; ++j) { 
    section.append(createChordElement(section_struct.chords[j])); 

    } 

container.append(section); 
} 


} 



$(function() { c_one() }); 


}

問題是它在同一時間繪製所有的和絃，它需要永遠。我已經嘗試了setTimeout和setInterval的所有組合，但我仍然遇到錯誤。

有人可以從這段代碼告訴如何讓一次一個而不是一次繪製一個和絃？

來源

2012-09-06 jthomasbailey

糾正我，如果我錯了，但我既沒有看到'setTimeout'也不'你已經發布代碼的任何地方setInterval'。還有更多嗎？ –

我把它們拿出來，因爲它們只是破壞東西。有*許多*變化。 – jthomasbailey

如果你可以用一個工作的例子建立一個jsbin環境會有所幫助。 – Jeemusu

終於想通了（使用一種稱爲doTimeout插件）：

$.doTimeout(1, function() { 
    chord.setChord(
    chord_struct.chord, 
    chord_struct.position, 
    chord_struct.bars, 
    chord_struct.position_text); 
    chord.draw(); 


});

來源

2012-09-06 11:28:07 jthomasbailey

麻煩的setInterval和setTimeout的工作

回答

相關問題