Javascript 多次交互后，jquery按钮交互速度减慢

每次选择4个按钮的特定组合并单击第5个按钮时，我都使用jQuery/javascript绘制一系列矩形。当我创建第10行矩形时，交互速度大大减慢。我以前创建过相同的交互，但它在网页上列出了元素。在画布中重试代码无法修复此问题

您正在将点击事件组合在一起。每次启动button1（），它都会添加另一个单击处理程序。因此，对于所有按钮功能：

这：

与此相反：

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时，你都会不断地启动这些切换功能。Toggle，您使用它的方式只是一个click事件处理程序，它跟踪这两个函数中的最后一个，以便可以触发另一个函数。如果您希望在

isClick

设置为零时触发一个或另一个切换函数，只需执行标准的单击并编写您自己的逻辑即可根据这些变量的值触发函数。

我们很难调试此代码-请制作一个小提琴或粘贴整个代码（使用html等）。我继续制作了一个JSFIDLE。观察10-12行矩形后代码的运行速度。您还可以做很多事情来减小该函数的大小。将按钮颜色重置包装在函数中。使用黄色按钮类，因此只需将背景颜色设置为#333一次（jquery自动循环该类的所有元素）。跟踪数组中的按钮状态，然后对其执行.join（“”）以获取单个字符串。然后，可以使用适当的联接数组（例如：“1_1_1_0_1”）生成对象文字或switch语句。MakePattern中第一个if前面的位也应该在其自身的函数中。为1-4个按钮调用makePattern会模糊它的用途。谢谢Erik。在此之前，我已经按照您提到的方式编写了代码。但是在makePattern（）事件完成后，切换失败。0值不会返回到每个按钮，除非我调用了每个按钮函数：/n这是因为切换相互覆盖，而不是因为切换方法关心is1-5Click的值是什么。这是全球性的，而且很快就会因多次解雇而改变。做一个简单的.click（函数（）{if（is1Click==0）{doThis（）；}否则{doThis（）；}）.toggle在这里是个错误的选择，我认为。你是对的！到目前为止，这是有效的。现在我觉得很傻，因为没有将单击本身绑定到if语句中，所以仍然有一个toggle，但不必使用toggle函数。祈求好运，这仍然有效！谢谢！

function button1(){
$("#button1").toggle(
    function() {
    $("#button1").css("background-color","yellow");
    is1click = 1;
    makePattern();
},
function() {
    $("#button1").css("background-color","#333");
    is1click = 0;
});
}