Как работает область видимости в JS?

Question

[BushaevDenis]

Не совсем понимаю, почему мои переменные не работют в функции.

function move_modal(ev) {
            console.log(lastPosY);
            if (!isDragging) {
                isDragging = true;
                lastPosY = modal_addproduct.offset().top;
            }

            var posY = ev.gesture.deltaY + lastPosY;


            modal_addproduct.css('top', posY + "px");

            if (ev.isFinal) {
                isDragging = false;
            }
        }

        var lastPosY = 0;
        var isDragging = false;

        var modal_header = $('.modal-header');
        var modal_addproduct = $('#addproduct');
        modal_header.hammer({direction: Hammer.DIRECTION_ALL, threshold: 0}).bind("pan", function (ev) {
            move_modal(ev);
        });

Когда событие тригггерится - то в консоль всегда выводится 0 из переменной lastPosY.

Comments

[kulaeff]

Может условие if (!isDragging) не срабатывает? А может проблема в bind("pan", function() {})? Попробуйте заменить на стрелочную функцию.

[BushaevDenis]

Ну почти, спасибо за наводку. Нужно было изменить код так.

if (ev.isFinal) {
     isDragging = false;
}

Бесит когда в оф. доках стоят устаревшие методы.
Но всё ещё поведение драг-н-дропа неверное.

Answer 1

[Михаил Макаров]

Почитай первую попавшуюся статью в интернетах про различия между let и var. Там будет и про области видимости, и про всё, что тебе нужно.

Comments

[BushaevDenis]

Почитал, не совсем понимаю как мне это поможет. Мне нужно, чтоб функция видела переменную за своим блоком. В первой же ссылке "про различия между let и var." написано что var видна везде. Что в моём случае так - но переменная не изменяется.

[BushaevDenis]

MaxKorz, Зачем? Функция же вызывается после объявление переменных.

[BushaevDenis]

Ну так что, мб заместо отсылания в гугл что-то конкретное скажешь?

[Павел Антонов]

BushaevDenis, так объяви их перед функцией)

[BushaevDenis]

Павел Антонов, Я не понимаю, вы читать умеете? Они объявлены перед вызовом функции. Как надоели "умники", которые даже сами не знают основ, а пытаются что-то "советовать".

[Павел Антонов]

BushaevDenis, а я вам объясняю, вместо пререканий возьмите и посмотрите что будет если вы перед вашей функцией сделаете var lastPosY = 0; var isDragging = false; а в функции присвоите новые значения но без var

[Павел Антонов]

читайте внимательнее сами, перед ФУНКЦИЕЙ обьявить переменные надо а не перед ВЫЗОВОМ ФУНКЦИИ

[BushaevDenis]

Павел Антонов, Запустите этот код, и не умничайте, если не уверены.

function _func() {
  function _func2() {
    name = 'Петя';
  }
  _func2();
}

var name = 'Вася';

_func();

console.log(name);

Answer 2

[Александр Чернокондратенко]

Вы присваиваете новое значение переменной lastPosY уже после того, как вывели предыдущее значение в консоль, так как предыдущее значение равно 0, то и в консоль всегда попадает 0.
Можно пройтись дебаггером в Chrome DevTools и быстро понять, что происходит.

function move_modal(ev) {
  console.log(lastPosY); // Шаг 3. выводиться значение из Шага 1
  if (!isDragging) {
      isDragging = true;
      lastPosY = modal_addproduct.offset().top; // Шаг 4. lastPosY === modal_addproduct.offset().top
  }
  // Шаг 5. console.log(lastPosY) Выведеться информация из Шага 4
  var posY = ev.gesture.deltaY + lastPosY;


  modal_addproduct.css('top', posY + "px");

  if (ev.isFinal) {
      isDragging = false;
  }
}

var lastPosY = 0;  // Шаг 1. lastPosY === 0
var isDragging = false;

var modal_header = $('.modal-header');
var modal_addproduct = $('#addproduct');
modal_header.hammer({direction: Hammer.DIRECTION_ALL, threshold: 0}).bind("pan", function (ev) {
  move_modal(ev); // Шаг 2. вызываем функцию
});

Вот облегченный пример того, что происходит

function move_modal(ev) {
  console.log(lastPosY) // 0
  lastPosY = 4;
  console.log(lastPosY) //4
}

var lastPosY = 0;

move_modal();

Comments

[BushaevDenis]

Ну там не важно что в консоль выводится.
Функция вызывается при каждом изменении положение курсора по нажатому элементу.
Так что в этом случае console.log выводила бы предыдущее значение lastPosY. Но оно всегда было 0. Но с этим я уже разобрался, виновато было условие

if (ev.isFinal) {
      isDragging = false;
  }

В итоге драгндроп стал более-менее работать, но все ещё есть баги. Пока не понимаю с чемсвязанные.