Javascript函数保持指数级循环.为什么

Javascript functions keep looping exponentially...Why?

本文关键字:循环 为什么 指数 函数 Javascript      更新时间:2023-09-26

我在javascript/jquery中有一个脚本,它试图模仿威斯康星州的卡片排序任务(猜测匹配卡片规则),但从试验3开始,它一直呈指数级增长。查看控制台日志的结果,小提琴的第 21 行。怎么了?

在这里摆弄:http://jsfiddle.net/vebsa4Lg/

var posfeed = "Right!";
var negfeed = "Wrong!";
var trials = ['GreenTriangle1','GreenTriangle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'RedCross4*GreenStar2*RedTriangle1*YellowCross3*BlueCircle4*2', 'BlueTriangle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'RedCircle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'GreenStar4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'YellowCross1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'BlueTriangle4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'RedCircle3*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'GreenCross4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'YellowCircle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'GreenTriangle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCross4*GreenStar2*RedTriangle1*YellowCross3*BlueCircle4*3', 'BlueTriangle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCircle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'GreenStar4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'YellowCross1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'BlueTriangle4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCircle3*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'GreenCross4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'YellowCircle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'GreenTriangle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCross4*GreenStar2*RedTriangle1*YellowCross3*BlueCircle4*4', 'BlueTriangle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'RedCircle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'GreenStar4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'YellowCross1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'BlueTriangle4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'RedCircle3*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'GreenCross4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'YellowCircle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2','GreenTriangle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'RedCross4*GreenStar2*RedTriangle1*YellowCross3*BlueCircle4*2', 'BlueTriangle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'RedCircle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'GreenStar4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'YellowCross1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'BlueTriangle4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'RedCircle3*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'GreenCross4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'YellowCircle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'GreenTriangle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCross4*GreenStar2*RedTriangle1*YellowCross3*BlueCircle4*3', 'BlueTriangle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCircle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'GreenStar4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'YellowCross1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'BlueTriangle4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCircle3*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'GreenCross4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'YellowCircle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'GreenTriangle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'RedCross4*GreenStar2*RedTriangle1*YellowCross3*BlueCircle4*4', 'BlueTriangle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2', 'RedCircle1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'GreenStar4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'YellowCross1*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*1', 'BlueTriangle4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'RedCircle3*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*3', 'GreenCross4*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*4', 'YellowCircle2*RedTriangle1*GreenStar2*YellowCross3*BlueCircle4*2'];
var resp;
var choice;
var fol = 0;
var i = 1;
$(function() {
        $("#feed").bind("click tap", function () {
            $("#feed").unbind("click");
            $("#feed").html("One moment...");
            Distribute(i, fol);
        });
    }); 
function Distribute(i, fol) {
    console.log('fol is ' + fol + ' and i is ' + i);
    if (fol >=4 && i<=10) {i=11;}
    if (fol >=4 && i<=20 && i>11) {i=21;}
    if (fol >=4 && i<=30 && i>21) {i=31;}
    if (fol >=4 && i<=40 && i>31) {i=41;}
    if (fol >=4 && i<=50 && i>41) {i=51;}
            if (fol >=4 && i > 50 && i<=60) {$("#feed").html("Task is over!");}
        if (fol < 4 && i==10) {i=1;}
        if (fol < 4 && i==20) {i=11;}
        if (fol < 4 && i==30) {i=21;}
        if (fol < 4 && i==40) {i=31;}
        if (fol < 4 && i==50) {i=41;}
        if (fol < 4 && i==60) {i=51;}
    setTimeout(function() {
            $('#feed').html('');
    var cur_trial = trials[i];
    var symb = cur_trial.split("*");
    $('#img1').html('<img src="CardSortTest/' + symb[1] + '.jpg" />');
    $('#img2').html('<img src="CardSortTest/' + symb[2] + '.jpg" />');
    $('#img3').html('<img src="CardSortTest/' + symb[3] + '.jpg" />');
    $('#img4').html('<img src="CardSortTest/' + symb[4] + '.jpg" />');
    $('#target').html('<img src="CardSortTest/' + symb[0] + '.jpg" />');
    resp=symb[5];
    Display(i, fol);
        },1500);
}
function Display(i, fol) {
                $("#img1").bind("click tap", function () {
                   choice = 1;
                    CheckResp(choice, i, fol);
                  // $("#img1").unbind("click");
            });
            $("#img2").bind("click tap", function () {
                   choice = 2;
                    CheckResp(choice, i, fol);
                   //$("#img2").unbind("click");
            });
            $("#img3").bind("click tap", function () {
                   choice = 3;
                    CheckResp(choice, i, fol);
                 // $("#img3").unbind("click");
            });
            $("#img4").bind("click tap", function () {
                   choice = 4;
                    CheckResp(choice, i, fol);
                 // $("#img4").unbind("click");
            });
        }

function CheckResp(gresp, i, fol) {
    $("#target").html('');
        i++;
    if (gresp == resp) {
    fol++;
            $("#feed").html(posfeed).promise().done(function(){ Distribute(i, fol); });
        }
    else { 
            $("#feed").html(negfeed).promise().done(function(){ Distribute(i, 0); });
        }
}

在每次调用Display时,您都会重新绑定图像上的单击处理程序 - 基本上每次都会添加新的单击处理程序。每次后续单击时都会调用其中的每一个。 也就是说,单击卡片,会向每张卡片添加一个单击处理程序...对于卡片具有的每次点击处理程序。 您应该只给Display打电话一次,而不是每次分发新卡时都打电话。由于处理程序位于包含元素上,因此尽管更改了其中的图像,它仍然会触发。

我冒昧地更新了您的代码以不使用全局变量,并且只设置一次处理程序。它使用数据值来保存当前值而不是全局数据。

见 http://jsfiddle.net/yk6s54x3/1/