Wie kann ich vermeiden, eine Funktion innerhalb einer Funktion aufzurufen?

Question

#branchID pool 
branch0 = "This is a wall of text. This is another wall of text! This is a third wall of text. This is a fourth wall of text. This is a fifth wall of text. This is a sixth wall of text. #branch1%" 
branch1 = "This is a second wall of text." 
branch2 = "This is a third wall of text." 
loopcounter = 0 

#classes section 
    #pulls text from pools above. 

branch = (name, branchid)-> 
    alert('begin loop') 
    stringID = String(branchid) 
    document.write("<h1 id=\'#{stringID}\'>#{name}</h1>") 

    document.getElementById(stringID).onclick = -> 
    for i in [loopcounter...stringID.length] 
     if branchid[i]!= "." and branchid[i]!="!" and branchid[i]!="?" and branchid[i]!="#" 
     document.write(branchid[i]) 

     else if branchid[i]=="#" 
      j = i+1 
      for k in [j...stringID.length] 
      if branchid[k] == "%" 
       j = k+1 
       alert("switchblock") 
       switch fcode 
       when "branch1" then branch('stuff', branch1) 
       when "branch2" then branch('stuff2', branch2) 
       else break 
       break 

      else 
       alert("gathering...") 
       fcode = "" 
       fcode += branchid[k] 

     else 
     alert('end sentence') 
     document.write(branchid[i]) 
     loopcounter = i+1 
     break 

#This is where the code is executed. 
window.onload = -> 
    branch("Start", branch0) 

Mein Code oben ist der Anfang eines Wählen Sie Ihr eigenes Abenteuer Gamebook.

Mein Code funktioniert durch Ausführen einer Funktion, die Text aus einer langen Zeichenfolge einen Satz nach dem anderen abzieht und in das HTML-Dokument schreibt.

Das Problem, das ich habe, ist, dass, wenn die Zeichenfolge keinen Text mehr hat, ich die gleiche Funktion erneut aufrufen muss, aber dieses Mal mit anderen Parametern, so dass eine andere Zeichenfolge auf dem Bildschirm angezeigt werden kann. Angesichts meiner derzeitigen Situation musste ich es innerhalb seiner eigenen Funktion nennen, aber ich habe das Gefühl, dass das einige Probleme verursacht. Wenn ich versuche, meinen Code auszuführen, handelt es sich um eine Funktion, die ich wirklich nicht verstehe und die ich in das Dokument schreibe, anstatt die neue Funktion auszuführen. Alle allgemeinen Ratschläge oder spezifische Diagnosen sind willkommen.

Ich bin an dieser Stelle nur ein wenig ratlos und bin mir nicht sicher, wohin ich von hier aus gehen soll. Vielleicht denke ich nicht richtig darüber nach? Und übrigens, ich habe in letzter Zeit eine Menge Hilfe vom Stapelüberlauf bekommen. Ich danke dir sehr. Ihr wart fantastisch.

** Ich warf eine Reihe von Alarmfeldern ein, damit ich versuchen konnte, herauszufinden, was die Schleife machte.

Codepen Posting: http://codepen.io/bryanwillis7/pen/WwMPaw

Answer 1

Wow, das ist der Hammer, aber ich denke, ich habe es funktioniert:

#branchID pool 
branch0 = "This is a wall of text. This is another wall of text! This is a third wall of text. This is a fourth wall of text. This is a fifth wall of text. This is a sixth wall of text. #branch1%" 
branch1 = "This is a second wall of text." 
branch2 = "This is a third wall of text." 


#classes section 
    #pulls text from pools above. 
branch = (name, branchid)-> 
    loopcounter = 0 
    alert('begin loop') 
    stringID = String(branchid) 
    document.write("<h1 id=\'#{stringID}\'>#{name}</h1>") 
    document.getElementById(stringID).onclick = -> 
    for i in [loopcounter...stringID.length] 
     if branchid[i]!= "." and branchid[i]!="!" and branchid[i]!="?" and branchid[i]!="#" 
     document.write(branchid[i]) 
     else if branchid[i]=="#" 
      j = i+1 
      fcode = "" 
      for k in [j...stringID.length] 
      if branchid[k] == "%" 
       j = k+1 
       alert("switchblock") 
       switch fcode 
       when "branch1" then return branch('stuff', branch1) 
       when "branch2" then return branch('stuff2', branch2) 
       else break 
       break 
      else 
       alert("gathering...") 
       fcode += branchid[k] 

     else 
     alert('end sentence') 
     document.write(branchid[i]) 
     loopcounter = i+1 
     break 

#This is where the code is executed. 
window.onload = -> 
    branch("Start", branch0) 

Okay, so hatte ich die Dinge nur ein paar zu ändern. Ich bewegte fcode aus dem switch Block und legte es direkt vor der k Schleife. Außerdem habe ich loopcounter in der branch Funktionsumfang definiert, sonst wird es nicht zurückgesetzt, und Sie erhalten ein index out of bounds Problem, das dazu führen wird, dass es undefined über eine Million Mal drucken. Zuletzt habe ich return direkt vor den rekursiven Aufrufen hinzugefügt. Dadurch wird die Ausführung der übergeordneten Funktion beendet.

Ehrlich gesagt, Ich denke, Sie sollten ernsthaft darüber nachdenken, dies in kleinere Bits Refactoring. All diese verschachtelten Loopings machen es wirklich schwer zu verfolgen, was vor sich geht. Versuchen Sie, eine Funktion zu erstellen, um nur zu prüfen, ob dies das Ende des Satzes ist, eine andere, um zu prüfen, ob Sie eine neue Verzweigung beginnen, und eine weitere, um die Zeichenfolge zu erfassen.

Wenn Sie Ihren Code in kleinere Blöcke unterteilen, können Sie ihn auch später leichter testen und ändern.

Hoffe, dass hilft.

Answer 2

Hier ist eine Vereinfachung von dem, was Sie versuchen zu tun.

Live-Demo:

https://jsfiddle.net/69r0xq9y/

Im Allgemeinen schlage ich vor, Ihre Daten in Objekte zu organisieren und es auf diese Weise verbrauchen. String-Parsing kann zu unnötigem nicht lesbarem Code führen.

HTML:

<h1 id="name"> 
    <!-- Branch name inserted here --> 
</h1> 
<p id="text"> 
    <!-- Branch text inserted here --> 
</p> 
<div id="options"> 
    <!-- Branch options inserted here --> 
</div> 

Coffee:

#branchID pool 
branches = 
    branch0: 
    name: "Start" 
    text: "There is a path to a forest and a path to a castle. Where do you want to go?" 
    options: 
     branch1: "Forest" 
     branch2: "Castle" 
    branch1: 
    name: "Forest" 
    text: "You are in a forest." 
    options: 
     branch0: "Go back to start" 
    branch2: 
    name: "Castle" 
    text: "You are in a castle." 
    options: 
     branch0: "Go back to start" 

#classes section 
#pulls text from pools above. 
branch = (branchid)-> 
    document.getElementById('name').innerHTML = branches[branchid].name 
    document.getElementById('text').innerHTML = branches[branchid].text 
    document.getElementById('options').innerHTML = '' 
    for targetBranch,buttonText of branches[branchid].options 
    createOption(targetBranch, buttonText) 

createOption = (branchid, text) -> 
    button = document.createElement('button') 
    button.innerHTML = text 
    button.onclick = -> 
    branch(branchid) 
    document.getElementById('options').appendChild(button) 

#This is where the code is executed. 
window.onload = -> 
    branch("branch0")