每次选择4个按钮的特定组合并单击第5个按钮时,我使用jQuery / javascript绘制一系列矩形。当我创建第10行矩形时,相互作用会大大减慢。我之前创建了相同的交互,但它在网页上创建了列表元素。在canvas中重试代码并没有解决这个问题。
答案 0 :(得分:2)
您将点击事件复合在一起。每次激活button1()时,它都会添加另一个单击处理程序。因此,对于所有按钮功能:
这样:
$("#button1").toggle(
function() {
$("#button1").css("background-color","yellow");
is1click = 1;
makePattern();
},
function() {
$("#button1").css("background-color","#333");
is1click = 0;
});
而不是:
function button1(){
$("#button1").toggle(
function() {
$("#button1").css("background-color","yellow");
is1click = 1;
makePattern();
},
function() {
$("#button1").css("background-color","#333");
is1click = 0;
});
}
然后停止调用“makePattern”末尾的函数。
我不是100%确定你的代码仍然可以按预期工作,但在当前状态下,每次触发那些按钮1-5时,你将继续触发所有这些切换功能。切换,你使用它的方式只是一个单击事件处理程序,它跟踪这两个函数中的最后一个被触发,因此它可以触发另一个。如果您希望在is<1-5>Click
设置为零时触发一个或另一个切换功能,只需执行标准单击并编写您自己的逻辑,以根据这些变量的值触发函数。