Javascript 当执行另一个函数时，如何中断该函数？

在我的一个javascript项目中，我遇到了一个问题。当我执行一个函数，然后执行另一个函数时，执行的第一个函数不会中断。我有下面的例子：

如果执行

Draw（）

，然后执行

Delete（）

，Draw函数不会中断

<button class="button" onclick="Draw();">
  <img src="imgs/drawBtn.png">
</button>
<button class="button" onclick="Delete();">
  <img src="imgs/deleteBtn.png">
 </button>

//js代码
函数绘图（）{
让pixels=document.queryselectoral（“.pixel”）；
let container=document.querySelector（“容器”）；
设为假；
让我；
container.addEventListener（“mousedown”，function（））{
按下=真；
})
container.addEventListener（“mouseup”，function（））{
按下=假；
})
对于（i=0；i

JavaScript函数在单个线程上执行

这意味着一个函数不能被它自己声明之外的另一个函数停止。一旦

Draw（）

函数启动，就无法使用

Delete（）

停止它

根据

Draw（）

的功能*，您可以执行以下操作

var isDrawing=false；
函数render（）{
document.getElementById（“is drawing”）.innerText=isDrawing？“drawing！”：“not drawing！”；
}
函数绘图（）{
isDrawing=！isDrawing；
render（）；
日志（isDrawing？“drawing！”：“NotDrawing！”）；
}
函数Delete（）{
isDrawing=false；
render（）；
console.log（'deleted！'）；
}

绘制切换
删除

您有Draw（）函数的代码吗？JavaScript是单线程的，不可抢占。在函数返回到主事件循环之前，事件不会发生。我们必须查看JavaScript才能知道您需要“中断”，一般来说，JavaScript函数只执行一次，然后“中断”，除非存在某种无限循环（不允许运行其他东西）或者某种递归函数链或setTimeout链或setInterval，我们需要查看JavaScript以了解结果，因此

onclick

直到

Draw（）

返回后才被处理，您不能提前停止它。在

Delete（）中

您始终可以使用

removeEventListener

删除将停止

Draw（）函数的事件侦听器。但这需要对函数进行一些重新构造，以便您可以获得传递的适当的
removeEventListener
参数。
// js code 

 function Draw(){
    let pixels = document.querySelectorAll(".pixel");
    let container = document.querySelector("#container");
    let pressed = false;
    let i;

        container.addEventListener("mousedown", function(){
            pressed = true;
        })

        container.addEventListener("mouseup", function(){
            pressed = false;
        })

        for(i = 0; i < pixels.length; i++){
            pixels[i].addEventListener("mouseover", function(){
                if(pressed == true){
                    this.style.backgroundColor =  document.getElementById('colorp').value;
                }
            });
        }
    }