Как остановить функцию JS после выполнения вложенной функции?

Question

[SightLS]

Добрый день/утро/вечер/ночь!
Есть функция dragndrop. Нужно чтобы после того как сработает функция drop, весь dragndrop перестал работать, то есть когда пользователь перенесет 1 объект, dragndrop выключился и второй объект уже будет невозможно перенести.
Я попробовал Реализовать это через async function и await new Promise. Вот сам код:

async function dragndrop3Orange() {

    let flag = false;

    await new Promise(resolve => {

        const  square3 = document.querySelectorAll('.square3');
        const checker3 = document.querySelectorAll('.checker3__orange');


        const dragstart = function () {
            setTimeout(() => {this.classList.toggle('hide');}, 0);
        };

       const dragend = function () {
            setTimeout(() => {this.classList.toggle('hide');}, 0);
        };  

        checker3.forEach(element => {
            element.addEventListener('dragstart', dragstart);
            element.addEventListener('dragend', dragend);

        });


        const dragover = function(event) {
            event.preventDefault();
        };
      
        const drop = function() {
            console.log('drop');
            checker3.forEach(element => {
                if (element.classList.contains('hide') === true) {
                    this.prepend(element);
                }
                
            });
            this.classList.remove('hovered');
            resolve(flag  = true);   // я сделал флаг тру
        };
        square3.forEach(element => {
            element.addEventListener('dragover', dragover);
            element.addEventListener('drop', drop);
        });
    });

    console.log(flag);// флаг стал true

    if(flag === true){
        return;  //почему функция не останавливается и объекты дальше можно двигать?
    }
}

dragndrop3Orange();

https://codepen.io/sightLS/pen/mdpoYqb

Comments

[WapSter]

removeEventListener

[Алексей Дубровин]

1) Что для вас остановка функции? для меня это завершение её дальнейшего выполнения. Не прекращение работы программы.
2) И да, функция остановила своё дальнейшее выполнение.

3) Зачем вы используете промис если не понимаете для чего он нужен?
4) Если убрать промис у вас что-то изменится в коде? Какую задачу он делает?
5) Для чего вам вообще флаг нужен ? Почему сразу не прекращать возможность перетаскивания.

Answer 1

[boomer_tm]

Вам нужно проверку флага перенести в функцию drop

const drop = function() {
if(flag === true){
        return;  //почему функция не останавливается и объекты дальше можно двигать?
    }
            console.log('drop');
            checker3.forEach(element => {
                if (element.classList.contains('hide') === true) {
                    this.prepend(element);
                }
                
            });
            this.classList.remove('hovered');
            resolve(flag  = true);   // я сделал флаг тру
        };