Javascript 如何在拼接索引后逐个运行循环数据

我有一个数组，我需要一个接一个地显示，当按钮按下时，它将转到下一个索引

我正在使用splice，因此在显示第一个索引后，我将使用splice删除第一个索引

function displayQuestionForScenario() {
    $.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        success: function(data) {

            question_data = data.questions;

            console.log(question_data);

            for (var i = 0; i < question_data.length; i++) {

                question_length = question_data.length;

                $('#display_question_scenario').text("1." + " " + question_data[i].question);

            
                $('.btn_submit').show();

                question_data.splice(i, 1);
                console.log(question_data);
                break;
            }

        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Error adding / update data');
        }
    });
}

我的数组的长度是3，所以我首先需要显示索引0，然后当用户单击按钮时，我将拼接我的数组，然后转到下一个索引

如果我的question_data.length仍然不是零，这意味着我的variablequestion_数据中仍然有数据，我的目标是当我单击按钮时，它将继续循环，但我不知道在拼接之后如何执行。谁能帮我弄清楚这件事。任何帮助都将不胜感激。

TL；Answer博士

不要使用循环！相反，保留一个索引变量来跟踪当前问题，在单击按钮时更新它，并使用它选择下一个问题

function getQuestionRenderer(initialCount, questions, $display) {
  var currentCount = initialCount;                     // this is the counter
  return function () {                                 // <-- 
    var q = questions[currentCount];                   // get question text
    if (q !== undefined) {                             // if q isn't undefined
      currentCount += 1;                               // increment counter
      $display.text(currentCount + ". " + q.question); // render question text
    }
  }
}

更长的解释

不能为此使用循环，因为循环会从开始到结束立即运行。如果我没弄错的话，你想要的是在用户提交之前的问题后显示每个问题

function getQuestionRenderer(initialCount, questions, $display) {
  var currentCount = initialCount;                     // this is the counter
  return function () {                                 // <-- 
    var q = questions[currentCount];                   // get question text
    if (q !== undefined) {                             // if q isn't undefined
      currentCount += 1;                               // increment counter
      $display.text(currentCount + ". " + q.question); // render question text
    }
  }
}

要做到这一点，您可以简单地使用闭包googlejavascript闭包进行大量的解释。让我们定义一个函数，它接受一个计数器变量、一个问题列表和一个元素来呈现问题，并返回另一个函数，调用该函数时，递增计数器并显示问题

function getQuestionRenderer(initialCount, questions, $display) {
  var currentCount = initialCount;                     // this is the counter
  return function () {                                 // <-- 
    var q = questions[currentCount];                   // get question text
    if (q !== undefined) {                             // if q isn't undefined
      currentCount += 1;                               // increment counter
      $display.text(currentCount + ". " + q.question); // render question text
    }
  }
}

getQuestionRenderer可以像这样手动使用：

var questions = [ /* ... elided, see above ... */ ];
var $displayEl = $('#display_question_scenario');

function getQuestionRenderer(initialCount, questions, $display) {
  // ... elided, see above ...
}

// 1. get the renderer function
var renderNext = getQuestionRenderer(0, questions, $displayEl);

// 2. render the first question
renderNext();

// 3. render the next questions
renderNext();
renderNext();

但是，我们可以在单击按钮时执行的事件处理程序函数中使用它，而不是调用renderNext 3次

首先定义事件处理程序：

function handleClick(callRenderNext) {
  return function (event) {
    event.preventDefault();  // prevent potential form submission (not sure if needed)
    callRenderNext();        // call renderNext again
  }
}

将其连接到按钮：

var questions = [ /* ... elided, see above ... */ ];
var $displayEl = $('#display_question_scenario'),
    $btnEl = $('.btn_submit');

function getQuestionRenderer(initialCount, questions, $display) {
  // ... elided, see above ...
}

function handleClick(callRenderNext) {
  // ... elided, see above ...
}

// 1. get the renderer function
var renderNext = getQuestionRenderer(0, questions, $displayEl);

// 2. add click handler to buttons
$btnEl.on('click', handleClick(renderNext));

// 3. render the first question
renderNext();

剩下要做的就是将其打包到AJAX请求的成功回调中，您就可以开始了：

function displayQuestionForScenario() {
  $.ajax({
    url: url,
    type: "GET",
    dataType: "json",
    success: function(data) {
      var $displayEl = $('#display_question_scenario'),
          $btnEl = $('.btn_submit');

      var renderNext = getQuestionRenderer(
        0, 
        data.questions,
        $displayEl
      );

      $btnEl.on('click', handleClick(renderNext));
      renderNext();

      // Don't forget to show the button!
      $btnEl.show();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert('Error adding / update data');
    }
  });
}

function getQuestionRenderer(initialCount, questions, $display) {
  // ... elided, see above ...
}

function handleClick(callRenderNext) {
  // ... elided, see above ...
}

工作同步示例

变量问题=[ {问题：'A？}， {问题：“B”}， {问题：‘C？} ]; var$displayEl=$‘显示问题情景’， $btnEl=$'。btn_提交'； 函数GetQuestionRenderInitialCount，questions$display{ var currentCount=初始计数； 返回函数{ var q=问题[currentCount]； 如果q！==未定义{ currentCount+=1； $display.textcurrentCount+.+q.question； } } } 函数handleClickcallRenderNext{ 返回函数事件{ 违约事件； 事件。停止传播； callRenderNext； } } var renderNext=getQuestionRender0，questions$displayEl； $btnEl.“单击”时，handleClickrenderNext； renderNext；

---

下一步如果要查询脚本以显示每个问题，为什么要同时返回所有问题？让您的远程脚本只返回阵列中的下一个问题，或者保留阵列客户端并使用pop或shift。因为，我显示的问题与一个场景相关，一个场景有多个相互关联的问题。您好，先生。谢谢你。这对我帮助很大。谢谢你的详细解释，先生。