不确定如何在步骤中运行Javascript动画。我现在已经将其实现为同时运行整个动画

Question

我正在创建一个动画来展示模式匹配算法的工作原理。现在，当按下排序按钮时，我从头到尾运行完整的动画。

我正在尝试实现一个'前进步骤'按钮（以及一个'后退步骤'按钮），当按下该按钮时将比较第一个位置的模式，然后在再次按下时在第二个位置比较它如果可能的话，我不确定如何实现这一点。

function kmp(p,t){
var k=0, j=0, result;
var fail=[];
var next=[];
var shifts = 0, comparisons = 0;
var boxWidth = $('#text_array .panel').outerWidth(true);
var places;
var previousMove = 0;
var totalMoves = 0;

kmpSetup(p, fail, next);

    xx = setInterval(function () {
        if(t[j] == p[k]) {
            turnGreen('#p', k);
            for(n=0; n<k; n++) {
                turnGreen('#p', n);
            }
            turnGreenWhite('#t', j);
            k = k+1;
            j = j+1;
        } else if(k==0) {
            j++;
        } else {
            turnRed('#p', k);
            turnRed('#t', j);
            for (var m = 0; m < p.length; m++) {
                turnWhite('#p', m);
            }
            turnWhite('#t', j);

            var position = k;
            k = next[k];

            //calculating how many places to shift the pattern
            // depending on the value in the table
            if (k == -1) {
                places = position + 1;
                totalMoves+=places;
                animatePattern(boxWidth, totalMoves, result);
                k = k+1;
            } else {
                places = position - k;
                totalMoves+=places;
                animatePattern(boxWidth, totalMoves, result);
            }

            if(j>=t.length && k>=p.length) {
                clearInterval(xx);
            }
        }
    }, 1000);

if(k>=p.length){
    result='match found';//match found
} else {
    result='match not found';//no match found
}
return result;
}

jsfiddle