2017-01-22 2 views
0

Ich habe eine Funktion, die eine andere Funktion aufruft, die setinterval enthält. Abhängig von den Variablen benötigt die zweite Funktion eine unterschiedlich lange Zeit. Wenn die erste Funktion vor dem Ende der Sekunde fortgesetzt wird, passiert die Hölle.Wie kann ich JavaScript-Funktion machen, um darauf zu warten, dass andere Funktionen beendet werden, ohne externe APIs zu verwenden?

Die Frage ist, wie kann ich erste Funktion warten, bis die zweite Funktion abgeschlossen ist, bevor Sie mit der nächsten Zeile fortfahren. Ich darf keine externen APIs verwenden. Vielen Dank.

Heres der Code, aber es kann ein wenig schwer zu verstehen sein. HTML:

<html> 
<head> 
<style> 
#canvas { 
background-color: rgba(158, 167, 184, 0.2); } 
</style> 

</head> 
<body onload="room1();"> 
    <canvas id="canvas" style="border: none;" width="800" height="600"></canvas>  
<script src="main.js"></script> 
</body> 
</html> 

JS:

var canvas=document.getElementById("canvas"); 
var gra=canvas.getContext("2d"); 
gra.font = "20px Courier New"; 

function pisz(text,x,y, interval) { 
x1=x; 
var i=0; 
var stopPisz=setInterval(function(){ 
if (i<text.length) { 
    var audio = new Audio('typwriter.wav'); 
    audio.volume=.1; 
    if (i%3==0 && text[i]!=" ") audio.play(); 
    gra.fillText(text[i],x1,y); 
    x1=x1+12; 
    if (x1>700 && text[i]==" "){ 
     x1=x; 
     y=y+22; 
     } 
    } 
    if (i>text.length-2) clearInterval(stopPisz); 
    i++; 
    },interval); 
} 


function room1() { 
text1="Witam cię w mojej grze. Twoim zadaniem jest rozwiązanie zagadek i wydostanie się z labiryntu pokoji."; 
text1.split(""); 
pisz(text1,20,30,50); 


text2="gfhfdghd hg fdhfgdfdf fdhfdgdfdf hdgdfhdfgdfghd"; 
text2.split(""); 
pisz(text2,20,200,50); 

} 

ich so etwas wie dies erreichen wollen:

function f1() { 

function f2(/*some parameters*/); 
//wait for function f2 to end, then proceed to next line of this function 

function f2(/*some parameters*/); 
//wait, etc. 

} 

function f2(/*some parameters*/){ 
//doing something once 
setInterval(function(/*some parameters*/){ 
//repeating something for some time, then clearInterval so the function ends 
    },some interval); 
} 
+3

Sie können Promises verwenden - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise –

+1

** es kann ein wenig schwierig sein, Verstehen ** - also helfen Sie jedem, indem Sie einfacheren Code bereitstellen. [Wie man ein minimales, vollständiges und überprüfbares Beispiel liefert] (http://stackoverflow.com/help/mcve) – iblamefish

+0

Edited, ich hoffe es ist jetzt verständlich was ich machen will. – MarioPL98

Antwort

2

Warum Sie nicht Rückrufe verwendet haben?
Sie können jeden CallBack als Funktion an eine andere Funktion übergeben und sie jederzeit aufrufen, z. B. bei http response oder nach timeOut oder in einem bestimmten Intervallschritt.

var f1 = function(delay, cb) { 
 
    setInterval(function() { 
 
    // do whatever you want, and now it's time to call your second function 
 
    if (cb) cb(); 
 
    }, delay); 
 
} 
 

 
var f2 = function(param) { 
 
    console.log('second function', param || '---'); 
 
} 
 

 

 
// Use like this: 
 

 
f1(1000, f2); 
 

 
// or : 
 

 
f1(2000, function() { 
 
    console.log('second function will be call'); 
 
    f2('with param'); 
 
});

+0

Diese Antwort benötigt mehr Erklärung. – Soviut

+0

@Soviut überprüfen Sie die Updates. –

+0

Überprüfen Sie meine Frage, ich fügte vereinfachten Code hinzu. – MarioPL98

Verwandte Themen