使setInterval和setTimeout工作时出现问题

Trouble getting setInterval and setTimeout to work

本文关键字：问题 工作 setInterval setTimeout      更新时间：2023-09-26

这使用Raphaeljs从数组中绘制一个和弦：

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的每一种组合，但我总是遇到错误。

有人能从这个代码中知道如何一次画一个和弦而不是一次画所有和弦吗？

最终解决了这个问题（使用一个名为doTimeout的插件）：

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

});
相关文章：