Javascript函数保持指数级循环.为什么
Javascript functions keep looping exponentially...Why?
我在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/
相关文章:
- 为什么“;未定义的“;在JavaScript中结束循环
- 为什么JavaScript在for循环为3时向所有4发出警报
- 为什么要返回'这'在导致循环的JavaScript原型中
- 为什么我的While循环不起作用
- 为什么AngularJS在每个摘要循环上都执行函数
- 为什么我们在ES2015中需要一个新的for循环结构,而我们已经有了for、forEach
- 为什么这个For循环会使浏览器实验室崩溃
- 为什么我使用javascript获得了一个无限的for循环
- 为什么我在下面的..of循环中得到意外令牌
- 为什么这个while循环不能使用AND逻辑运算符
- 为什么ng中的自定义指令在循环完成后重复运行
- 为什么这会造成一个无休止的循环并使我的浏览器崩溃
- 为什么不'当循环停止时
- JavaScript:为什么这个循环的优化使它变慢了
- 在 for 循环中,为什么 i++ 在第二次使用后变为 1
- 带有foo.js和foo.js.coffee(空)的Rails资产管道导致js循环.为什么?
- Javascript函数保持指数级循环.为什么
- for循环为什么以及何时忽略具有html集合的某些项
- jQuery函数循环:为什么夏奇拉在陌生人吻她时重复吻
- 美元.进入循环:为什么函数在递增之后执行