当另一个函数在javascript中启动时如何停止一个函数？答案

【问题标题】：How to stop a function when another function starts in javascript?当另一个函数在javascript中启动时如何停止一个函数？
【发布时间】：2021-06-11 19:24:29
【问题描述】：

我有 2 个具有各自功能的按钮：linemaker 和 circlemaker。

在linemaker 我有 3 个eventlisteners：mousedown、mousemove 和 mouseup。这样我就可以在画布上画画了。

在circlemaker 我有 1 个eventlistener：click。所以我从用户那里得到一个半径输入，然后点击一下，他们就可以在画布上画圆。

但是如果他们同时点击这两个按钮，在他们画完之后，一行的末尾会有一个圆圈。我想阻止这种情况发生，所以如果他们点击圆形按钮，线条按钮的功能将停止。反之亦然。

有没有办法做到这一点？我不使用任何setTimeout，所以我认为我不能在这里使用clearTimeout。

【问题讨论】：

请分享相关代码。

标签： javascript function

【解决方案1】：

由于您没有提供代码，我将提出一种画线和圆的方法。首先，我会使用单选按钮来选择线或圆。如果你真的想的话，你可以应用 CSS 给那些button look-n-feel。

然后在 mousedown 事件中，读出选中的单选按钮。

在 mousemove 上，只需考虑形状（线或圆）可以完成（不需要 mouseup 监听器）。只要接下来有另一个 mousemove 事件，就调整最后绘制的形状。

对于圆来说，不要求输入半径，而是使用 mousemove 事件来确定圆的半径似乎更直观。这样画线和画圆的界面就很相似了，可以用两个点来定义一条线和定义一个圆。

这是一个小演示：

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let items = [];

function distance(a, b) {
    return Math.sqrt((b.x-a.x)**2 + (b.y-a.y)**2);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let {itemType, start, end} of items) {
        ctx.beginPath();
        if (itemType == "line") {
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(end.x, end.y);
        } else {
            ctx.arc(start.x, start.y, distance(start, end), 0, 2*Math.PI);
        }
        ctx.stroke();
    }
}

function cursorPoint(e) {
    return { x: e.clientX - e.target.offsetLeft, y: e.clientY - e.target.offsetTop };
}

canvas.addEventListener("mousedown", function(e) {
    let itemType = document.querySelector("[name='shape']:checked").value;
    items.push({itemType, start: cursorPoint(e), end: cursorPoint(e)});
    draw();
});

canvas.addEventListener("mousemove", function(e) {
    if (e.buttons === 0) return;
    items[items.length-1].end = cursorPoint(e);
    draw();
});

canvas { border: 1px solid }

<canvas></canvas>
<br><input type="radio" name="shape" value="line" checked>Line
<br><input type="radio" name="shape" value="circle">Circle

【讨论】：

【解决方案2】：

为此创建变量

let lineDrawing = false
let circleDrawing = false

每当调用线函数时，在设置lineDrawing = true 和运行画线代码之前检查以确保circleDrawing === false。当用户停止绘制时，设置lineDrawing = false

每当调用圆函数时，请在设置circleDrawing = true 并运行圆绘制代码之前检查以确保lineDrawing === false。当用户停止绘制时，设置circleDrawing = false

【讨论】：