Question

我在javascript / jquery中有一个脚本，它试图模仿威斯康星卡片排序任务（猜测匹配卡片规则），但是从试用版3开始以指数方式查看。查看控制台日志的结果，小提琴的第21行。怎么了？

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

}

Answer 1

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

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

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

Javascript函数以指数方式循环...为什么？

1 个答案: