Versprechen mit Timeout in 'für' Schleife

Question

Ich habe einige Funktionen, die nacheinander in Schleife und mit Verzögerung ausgeführt werden sollten. Hier ist der Code, den ich habe:

function func1() { 
    for (var i = 0; i < 3; i++) { 
    func2().then(); // await in loop until func2() completed  
    } 
} 

function func2() { 
    return new Promise(succes) { 
    for (var i = 0; i < 10; i++) { 
     function3().then(); //wait untill function3 and then continue looping 
    } 
    success(); 
    } 
} 

function function3() { 
    return new Promise(function(ready) { 
    setTimeout(function() { 
     // do some stuff 
     ready(); 
    }, 2000); 
    }); 
} 

Aber es funktioniert nicht. Was ich ändern sollte?

Answer 1

Ich denke, was Sie zu verwenden beabsichtigt ist ES8 des (ES2017) async/await Konstrukt:

async function func1() { 
 
    for (var i = 0; i < 3; i++) { 
 
    console.log(`func1 waiting for func2 #${i + 1}`); 
 
    await func2(); // await in loop until func2() completed 
 
    console.log(`Finished iteration ${i} for func1`); 
 
    } 
 
} 
 

 
async function func2() { 
 
    console.log('Started func2'); 
 
    for (var i = 0; i < 10; i++) { 
 
    console.log(`func2 waiting for func3 #${i + 1}`); 
 
    await function3(); //wait untill function3 and then continue looping 
 
    } 
 
} 
 

 
function function3() { 
 
    return new Promise(resolve => setTimeout(resolve, 1000)); 
 
} 
 

 
func1().then(() => console.log('finished'));

Für eine breitere Browser-Unterstützung, können Sie Babel

verwenden.

Answer 2

Sie können .each() von jQuery verwenden, es ist synchron, so dass die nächste Schleife erst am vorherigen Ende ausgelöst wird. Sie können auch Callbacks hinzufügen, die hier nicht benötigt werden.

Answer 3

Ich weiß nicht, es ist die beste Lösung, aber es ist ein Weg, und ich denke, das ist einfach zu implementieren.

function func1(i){ 
 
    i++; 
 
    return new Promise(function(ready){ 
 
      setTimeout(function(){ 
 
       func2(i); 
 
       ready(i);   
 
      }, 1000); 
 
    }); 
 
} 
 

 
function func2(i = 0){ 
 
    if(i < 10){ 
 
    func1(i).then((test) => { 
 
     console.log(test); 
 
    }) 
 
    } else { 
 
    return false; 
 
    } 
 
} 
 
func2();