Прохождение большого массива JavaScript при отображении диаграммы аккордов - PullRequest
Новая
       15

Прохождение большого массива JavaScript при отображении диаграммы аккордов

0 голосов
/ 18 марта 2012

Я использую Raphaeljs и Jquery для рисования диаграмм аккордов из огромного массива, и это занимает вечность, я пытаюсь найти способ рисовать один аккорд за раз, чтобы избежать ошибок тайм-аута JavaScript и не дать пользователю иметь смотреть на пустой экран.

Вот как я рисую SVG: 

   function drawthis() {
   var container = $("#mydiv");

   for (var i = 0; i < myarray.length; ++i) {
   var section_struct = myarray[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() { drawthis() });

Как лучше всего рисовать одну аккордовую диаграмму за раз вместо того, чтобы делать их все сразу?

1 Ответ

0 голосов
/ 01 июня 2015

Я создал искатель аккордов, который ссылается на объект с около 1000 аккордов.Они построены за долю секунды.Я использовал таблицы, хотя это, вероятно, быстрее.Я не знаю, является ли это самым быстрым способом, но он работал хорошо для меня.Это все vanilla js.

В основном я создал объект аккордов, который содержал все аккорды.В этом примере я буду использовать два. 

var chords = [
    {
        chord: ['x', 0, 2, 0, 2, 0],
        name: 'A',
        type: '7',
    },
    {
        chord: ['x', 3, 2, 0, 1, 0],
        name: 'C',
        type: 'maj',
    },
];

Затем я вставил подвижные аккорды в объект аккордов вместо того, чтобы вводить каждый аккорд 12 раз для каждой позиции ладу. 

// we need the notes twice for creating bar chords.  We'll start at a note then move thorough the next 12
var allSharpNotes = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G'];
// using 'x' for natural notes to prevent duplicates and make sure array is iterated over correct number of times 
var allFlatNotes = ['x', 'Bb', 'x', 'x', 'Db', 'x', 'Eb', 'x', 'x', 'Gb', 'x', 'Ab', 'x', 'Bb', 'x', 'x', 'Db', 'x', 'Eb', 'x', 'x', 'Gb', 'x', 'Ab'];

function makeMovableChords(sharpOrFlat){
    for(ch = 1; ch < 13; ch++){
    chords.push({   
            chord: ['x', 0 + ch, 2 + ch, 2 + ch, 2 + ch, 0 + ch],
            name: sharpOrFlat[ch],
            type: 'maj',
    });
    }
}

// Now run the function and have it create # and b versions of each movable chord.
makeMovableChords(allSharpNotes);
makeMovableChords(allFlatNotes);

Затем разметка.По сути, просто создаем топор, у сетки. 

<div class="chord-container">
    <div id="chord-name"></div>
    <table class="chord">
        <tr id="f0"><td id="s0-f0" class="note nut hide"></td><td id="s1-f0" class="note nut"></td><td id="s2-f0" class="note nut"></td><td id="s3-f0" class="note nut"></td><td id="s4-f0" class="note nut"></td><td id="s5-f0" class="note nut"></td></tr>

        <tr id="f1"><td id="s0-f1" class="note hide"></td><td id="s1-f1" class="note"></td><td id="s2-f1" class="note"></td><td id="s3-f1" class="note"></td><td id="s4-f1" class="note"></td><td id="s5-f1" class="note"></td></tr>

        <tr id="f2"><td id="s0-f2" class="note hide"></td><td id="s1-f2" class="note"></td><td id="s2-f2" class="note"></td><td id="s3-f2" class="note"></td><td id="s4-f2" class="note"></td><td id="s5-f2" class="note"></td></tr>

        <tr id="f3"><td id="s0-f3" class="note hide"></td><td id="s1-f3" class="note"></td><td id="s2-f3" class="note"></td><td id="s3-f3" class="note"></td><td id="s4-f3" class="note"></td><td id="s5-f3" class="note"></td></tr>

        <tr id="f4"><td id="s0-f4" class="note hide"></td><td id="s1-f4" class="note"></td><td id="s2-f4" class="note"></td><td id="s3-f4" class="note"></td><td id="s4-f4" class="note"></td><td id="s5-f4" class="note"></td></tr>

        <tr id="f5"><td id="s0-f5" class="note hide"></td><td id="s1-f5"class="note"></td><td id="s2-f5" class="note"></td><td id="s3-f5" class="note"></td><td id="s4-f5" class="note"></td><td id="s5-f5" class="note"></td></tr>
    </table>
    <div id="select-container">
        <select id="chord-select">
            <option>Dmin</option>
            <option>Emin</option>
            <option>A7</option>
            <option>Cmaj</option>
            <option>Dmaj</option>
            <option>Gmaj</option>
        </select>
        <button id="chord-button" onclick="buildChord();">Make Chord</button>
    </div>
</div>

Затем, наконец, функция, которая создает аккорд, который запускается при нажатии.

function buildChord(){
    var selectedChord = document.getElementById('chord-select').value;
    // reset all the notes before a new chord is built
    var allNotes = document.getElementsByClassName('note');
    for(i=0; i<allNotes.length; i++){
        allNotes[i].innerHTML = '';
    }
    for(c=0; c<chords.length; c++){
        var searchChord = selectedChord.search(chords[c].name + chords[c].type);
        if(searchChord != -1){
            document.getElementById('chord-name').innerHTML = chords[c].name + chords[c].type;
            for(s=0; s<6; s++){
                switch(chords[c].chord[s]){
                    case 0: 
                        var fret = 0;
                    break;
                    case 1: 
                        var fret = 1;
                    break;
                    case 2: 
                        var fret = 2;
                    break;
                    case 3: 
                        var fret = 3;
                    break;
                    case 4: 
                        var fret = 4;
                    break;
                    case 5: 
                        var fret = 5;
                    break;
                    case 'x':
                        var fret = 'x'
                    break;
                }
                if (fret == 'x'){
                    var placement = 's' + s + '-f' + '0';
                    document.getElementById(placement).innerHTML = '<span class="chord-note">x</span>';
                } else{
                    var placement = 's' + s + '-f' + fret;
                    document.getElementById(placement).innerHTML = '<span class="chord-note">' + chords[c].fingering[s] + '</span>'; 
                }
            }
        }
    }
}
buildChord();

Тогда, конечно, вам нужно сделать немного стайлинга. Проверьте мой jsfiddle здесь.

Я также написал более подробное руководство здесь.

Надеюсь, это поможет.

...