Как остановить запуск функции после того, как я использую другую функцию через onclick?

Я пытался создать Graph Simulator, где пользователь может вставить вершину (точка / дуга) и соединить ее с линией. Моя проблема здесь заключается в том, что всякий раз, когда я вызываю функцию для добавления вершины (функция AddVertex ()), а затем вызываю функцию для соединения вершин (функция Connect ()), функция AddVertex () все еще выполняется с функцией Connect (). Это означает, что он рисует линию с дугами на своем конце.

То, что я пытаюсь сделать, это то, что программа должна запускать только одну функцию за раз, то есть, если я вызываю AddVertex (), она должна рисовать только точки / дуги, когда я нажимаю на холсте, то же самое в Connect (), она должна рисовать линии только когда я нажимаю на холст, а не с дугами на его конце. Я использовал другие методы, такие как отключение, используя if else, но он не работает.

Вот мой HTML и Javascript код:

HTML:

<div id = "ButtonSection">

    <BUTTON id = "addvertex" onclick = "AddVertex()"><B>(+) Add Vertex</B></BUTTON>
    <BUTTON id = "connect"  onclick = "Connect()"><B>Connect Vertex</B></BUTTON>
 </div>



<canvas id= "CanvasArea" width = "700px" height = "600px">
</canvas>

</BODY>

JAVASCRIPT:

функция AddVertex () {.....

        function GetXYPosition(event)
                {
                     .....
                }

        function DrawArc(event)
                {
                     .....
                }

}

function Connect () {

   ....

            function GetCursorPosition(event)
            {        
                .....     
            }

            function DrawLine(event)
            {
               .....
                }                        

}

Всего 1 ответ


Если вы хотите, чтобы функции запускались, когда пользователь нажимает на холст, вы должны использовать обработчик событий для canvas.onclick . Лично я никогда не пытался по-настоящему определять попадания на холсте, но многие программы отслеживают вещи на холсте в отдельном объекте. Вы также можете просто обнаружить попадание, выбрав цвет холста под курсором.

Когда дело доходит до предотвращения одновременного запуска функций, можно использовать флаги, которые хранят то, что работает. Например...

var flag = false;
function one() {
    if (flag) return;
    flag = true;
    // do something important
    console.log('function one running');
    flag = false;
}

function two() {
    if (flag) return;
    flag = true;
    // do something else
    console.log('function two running');
    flag = false;
}

Если бы вы вызывали one() последующим two() очень быстро, он бы записывал в журнал только function one running потому что установлен flag true и блокирует выполнение two() .


Есть идеи?

10000