如何縮短這個金字塔形的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); 
} 

然後定義你的sucessGetHandler和successPostHandler

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

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

，並定義一個函數Ajax請求點擊事件

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);