このピラミッド型のJavaScriptを短縮するには？

Question

私はクイズアプリケーションを開発しようとしています。

質問を取得するためにサーバーに非同期リクエストを行い、POSTで回答を返信します。

これは質問がなくなるまで続きます。

私のコードは悪い解決策であることは知っていますが、私はそれを実行するより良い方法を考え出すことができませんでした。助言がありますか？

マイコード：

quizStart(input, config) { 
    var ajaxConfig; 
    var query; 
    var inputValue; 
    var answerButton = document.querySelector("#answer .button"); 

    input.startGame.addEventListener("click", function() { 
     this.totalTime.start(); 
     this.timer.countdown(20); 

     input.startText.parentNode.removeChild(input.startText); 

     ajaxConfig = { 
      method: "GET", 
      contentType: "application/JSON", 
      url: config.url, 
      query: null 
     }; 

     ajax.request(ajaxConfig).then(function(data) { 
      data = JSON.parse(data); 
      this.altsOrIn(data); 
      answerButton = document.querySelector("#answer .button"); 
      inputValue = input.answer.querySelector("#valueInput"); 

      answerButton.addEventListener("click", function() { 
       if (inputValue.value === "") { return;} 
       this.timer.stop(); 

       query = { 
        answer: inputValue.value 
       }; 

       ajaxConfig = { 
        method: "POST", 
        contentType: "application/JSON", 
        url: data.nextURL, 
        query: JSON.stringify(query) 
       }; 

       ajax.request(ajaxConfig).then(function(data) { 
        data = JSON.parse(data); 
        this.result(data); 

        answerButton.addEventListener("click", function() { 
         this.timer.countdown(20); 

         ajaxConfig = { 
          method: "GET", 
          contentType: "application/JSON", 
          url: data.nextURL, 
          query: null 
         }; 

Answer 1

あなたは

function ajaxGETHandler(url) { 

ajaxConfig = { 
      method: "GET", 
      contentType: "application/JSON", 
      url: url, 
      query: null 
     }; 

$.ajax(ajaxConfig).success(successGetHandler); 
} 

function ajaxPostHandler(url,data){ 
    ajaxConfig = { 
      method: "POST", 
      contentType: "application/JSON", 
      url: url, 
      query: null 
     }; 

$.ajax(ajaxConfig).success(successPostHandler); 
} 

以下のようにAjaxリクエストをするために、単一の機能を持っている必要があり、あなたのsucessGetHandlerとsuccessPostHandlerを定義

function successGetHandler(response) { 
    //do stuff here with response 
} 

function successPostHandler(response) { 
//do stuff here with response 
} 

とする関数を定義しますクリックイベント

function btnClickHandler(e) { 

     this.totalTime.start(); 
     this.timer.countdown(20); 

//call ajaxgethandler and ajaxpost handler here 
} 

btn.addEventListener("click",btnClickHandler); 

Answer 2

まずあなたの代わりにthen節でそれらを宣言するのという名前の関数を定義することができます。

例えば：

var gameStart = function() { 
    // …  
    answerButton.addEventListener("click", firstStep); 
}; 

var firstStep = function() { … }; 


input.startGame.addEventListener("click", gameStart);