JavaScript Петли при вызове Async

Question

Проблема: JavaScript может успешно нарисовать несколько дуг на экране, но они исчезают при запуске. Я запускаю простой цикл, вызывающий функцию ARC, я не понимаю !?

Все, что я хочу сделать, это запустить каждый звонок шаг за шагом и спящий! Это можно сделать на любом языке вне JavaScript с легкостью, это простой процедурный Loop.

Проблема заключается в том, что мой график отображается на долю секунды до исчезновения. Однако, если я прохожу через код через отладчик JavaScript, он работает, пока он не исчезнет снова!

Разочарование! Я пытался обернуть это с помощью timeOut, поэтому я могу спать, чтобы показать медленную анимацию. Что происходит с моими друзьями, это ошибка в JavaScript или мои основные принципы не существуют. Я не могу понять код, когда он так логически написан.

https://jsfiddle.net/nd6gktmf/

var array_length = attack_list.length; 
//EDITED: declare local variables 
var coordinates, 
    origin_longitude, 
    origin_latitude, 
    dest_longitude, 
    dest_latitude; 

for(var i=0; i < array_length; i++) { 
    coordinates = attack_list[i]; 
    //EDITED: consider using dot notation 
    origin_longitude = coordinates.origin.longitude; 
    origin_latitude = coordinates.origin.latitude; 
    dest_longitude = coordinates.destination.longitude; 
    dest_latitude = coordinates.destination.latitude; 

    draw_arc(origin_longitude, origin_latitude, dest_longitude, dest_latitude); 
}  

Это работает только в режиме отладки! Что такое ....

function draw_arc(origin_longitude, origin_latitude, dest_longitude, dest_latitude) { 
    var data_to_map = 
     [{ 
      origin: { 
       latitude: origin_latitude, 
       longitude: origin_longitude 
      }, 
      destination: { 
       latitude: dest_latitude, 
       longitude: dest_longitude 
      } 
     }]; 

    console.log("****** Begin******"); 
    console.log(origin_longitude); 
    console.log(origin_latitude); 
    console.log(dest_longitude); 
    console.log(dest_latitude); 
    console.log("****** End ******"); 

    election.arc(data_to_map, {strokeWidth: 2}); 
} 

Answer 1

Кевин отметил: Удалить все яваскрипт код, который вы добавили на свой вопрос (конечно, оставить свои данные: election и attack_list) и заменить его:

// loop over the attack_list 
attack_list.forEach(function(attack_item, i){ 
    // now attack_item is one item from the array, i is the index in the array 
    // we set up a timer FOR EACH item in the array 
    setTimeout(function(){ 
    // we make an empty array, because election.arc needs an array, 
    // eventhough we'll only send 1 item in it, we wrap it in an array 
    var draw_list = []; 
    draw_list.push(attack_item); 
    // put the item into the array 
    election.arc(draw_list,{strokeWidth: 2}); 
    }, i*2000); 
    // note: the time is i*2000ms = i*2s 
    // the "1st" item in attack_list is at index 0 
    // so 0*2000=0 => it'll start drawing it immediately (t=0) 
    // it animates for about 1s (t=1) 
    // the last drawn line is still displayed (t=1..2) 
    // 
    // t=2: now the timer for the "2nd" item (i=1) starts drawing 
    // but because we created a new empty array and only added the 2nd item 
    // into it, when it draws, it erases everything that we drew before 
    // and now you only see the 2nd item is getting animated. 
    // etc... 
}); 

https://jsfiddle.net/flocsy/nd6gktmf/3/

Answer 2

Если вы посмотрите на документ, кажется, что вы должны положить все свои дуги в том же массиве.

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