Question

我有以下代码来显示特定索引处的数组中的字符串。每次调用函数时都会递增索引并显示一个新字符串：

var questions = ["What is your name?","What is your favourite colour?","What is the air speed velocity of an unladen swallow?"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
            console.log(questions[currentQuestionIndex]);
            question.text(questions[currentQuestionIndex]);
        
        currentQuestionIndex = currentQuestionIndex+1;

        questionTimer();
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="question"></div>

这样可以正常工作，但是一旦我尝试淡出/淡出问题div，代码就不再正常工作并且索引1处的字符串显示而不是0.有人可以解释为什么吗？

非工作版本：

var questions = ["What is your name?","What is your favourite colour?","What is the air speed velocity of an unladen swallow?"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
        question.fadeOut(400, function () {
            question.text(questions[currentQuestionIndex]);
            question.fadeIn(400);
        });
        
        currentQuestionIndex = currentQuestionIndex+1;

        questionTimer();
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="question"></div>

Answer 1

那是因为动画是异步的。增加变量的代码将在设置文本的代码之前运行。

增加设置文本的代码中的变量：

var question = $('#question');
question.fadeOut(400, function () {
    question.text(questions[currentQuestionIndex]);
    currentQuestionIndex = currentQuestionIndex+1;
    question.fadeIn(400);
});

演示：

＆＃13;

    var questions = ["What is your name?","What is your favourite colour?","What is the air speed velocity of an unladen swallow?"];
    var currentQuestionIndex = 0;

    function showQuestion() {
        
        if (currentQuestionIndex <= questions.length-1) {
            
            var question = $('#question');
            question.fadeOut(400, function () {
                question.text(questions[currentQuestionIndex]);
                currentQuestionIndex = currentQuestionIndex+1;
                question.fadeIn(400);
            });

            questionTimer();
        } else {
            console.log("End question 1");
        }
    }

    function questionTimer() {
        setTimeout(function () {
            showQuestion();
        }, 3000);
    }

    showQuestion();

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="question"></div>

＆＃13;

Answer 2

当文字尚未淡出时，你正在做+1。要解决此问题，请移动fadeOut()回调中的所有内容：

var questions = ["Question 1","Question 2","Question 3","Question 4"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
        question.fadeOut(400, function () {
            question.text(questions[currentQuestionIndex]);
            question.fadeIn(400);
            currentQuestionIndex = currentQuestionIndex+1;
            questionTimer();
        });
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="question"></div>

Answer 3

问题在于你假设线程将停止执行并等待效果完成以继续下一句话。那是不对的。效果是异步运行的，所以当它渐渐消失时，你会增加计数器，所以当它准备淡出时，计数器已经增加了1.

就像你等待fadeOut完成fadeIn一样，你必须等到fadeIn完成才能增加计数器的值。

轻松修复

＆＃13;

var questions = ["Question 1","Question 2","Question 3","Question 4"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
        question.fadeOut(400, function () {
            question.text(questions[currentQuestionIndex]);
            question.fadeIn(400,  function() {
              currentQuestionIndex = currentQuestionIndex+1;                       
              questionTimer();});
        });

       //move these two inside the callback for fadeIn
       //currentQuestionIndex = currentQuestionIndex+1;                       
       //questionTimer();
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="question"></div>

＆＃13;

.fadeIn .fadeOut导致数组索引的奇怪行为

3 个答案: