Признак слушателя событий из-за пределов функции

Question

Как я могу наружу от функции init, сбрасывать функцию сброса в init.

Я хочу, чтобы моя функция сброса сбросила все переменные, установленные из коллекции изображений (3 в этом случае), которая связана 3 раза. Мой пример здесь не работает, я знаю.

Вот мой код:

document.getElementsByClassName('zoomer-start')[0].addEventListener('click', init); 

    document.getElementsByClassName('zoomer-reset')[0].addEventListener('click', reset); 

    function init() { 
     var images = document.querySelectorAll('.zoomer-img'); 

     for (var i = 0; i < images.length; i++) { 
      (function() { 
       var image = images[i]; 

       var zoomer = new Hammer(image); 

       zoomer.get('pinch').set({enable: false}); 
       zoomer.get('pan').set({enable: false}); 

       var clicked = false; 

       var adjustScale = 1; 
       var adjustDeltaX = 0; 
       var adjustDeltaY = 0; 

       var currentScale = null; 
       var currentDeltaX = null; 
       var currentDeltaY = null; 

       zoomer.on('tap', function (e) { 
        if (!clicked) { 
         zoomer.get('pinch').set({enable: true}); 
         zoomer.get('pan').set({enable: true, direction: Hammer.DIRECTION_ALL}); 
         clicked = true; 
        } else { 
         zoomer.get('pinch').set({enable: false}); 
         zoomer.get('pan').set({enable: false}); 
         clicked = false; 
        } 

        if (currentScale > 1) { 
         adjustScale = 1; 
         adjustDeltaX = 0; 
         adjustDeltaY = 0; 
        } else { 
         adjustScale = 2; 
        } 

        currentScale = adjustScale * e.scale; 
        currentDeltaX = adjustDeltaX + (e.deltaX/currentScale); 
        currentDeltaY = adjustDeltaY + (e.deltaY/currentScale); 

        image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)'; 
       }); 

       zoomer.on('pan pinch', function (e) { 
        currentScale = Math.max(1, Math.min(adjustScale * e.scale, 4)); 
        currentDeltaX = adjustDeltaX + (e.deltaX/currentScale); 
        currentDeltaY = adjustDeltaY + (e.deltaY/currentScale); 

        var scaledX = ((((image.width * currentScale)/2) - (image.width/2))/currentScale); 
        if (currentDeltaX > scaledX) 
         currentDeltaX = scaledX; 
        if (currentDeltaX < -scaledX) 
         currentDeltaX = -scaledX; 

        var scaledY = ((((image.height * currentScale)/2) - (image.height/2))/currentScale); 
        if (currentDeltaY > scaledY) 
         currentDeltaY = scaledY; 
        if (currentDeltaY < -scaledY) 
         currentDeltaY = -scaledY; 

        image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)'; 
       }); 

       zoomer.on('panend pinchend', function() { 
        adjustScale = currentScale; 
        adjustDeltaX = currentDeltaX; 
        adjustDeltaY = currentDeltaY; 
       }); 

       function reset() { 
        zoomer.get('pinch').set({enable: false}); 
        zoomer.get('pan').set({enable: false}); 

        clicked = false; 

        adjustScale = 1; 
        adjustDeltaX = 0; 
        adjustDeltaY = 0; 

        currentScale = null; 
        currentDeltaX = null; 
        currentDeltaY = null; 

        image.style.transform = 'scale(' + 1 + ') translate3d(' + 0 + 'px, ' + 0 + 'px, 0)'; 
       } 
      })(); 
     } 
    } 

Answer 1

Чтобы вызвать функцию (ы) из области внутри, вы должны как-то передать ее в область разрешения. Один из возможных примеров для вашего кода:

var resets = []; 
function init() { 
[...] 
    for (var i = 0; i < images.length; i++) { 
     (function() { 
      [...] 
      resets[i]=function reset() { 
      [...] 
      }) 

А потом называть их наивности:

resets[0](); resets[1](); resets[2]; 

Или через:

resets.forEach(function(f) { f(); }); 

Answer 2

Имея свои функции в функции инициализации дает им Private СФЕРА только (могут быть доступны только в функции инициализации) Для того, чтобы дать им глобальную область видимости, вам придется переместить их за пределы функции init, которая потребует некоторой перестройки кода.

Answer 3

С кодом, указанным, вы не можете. Функция reset полностью закрыта для кода в анонимной функции внутри init. Даже другие коды в init не могут получить к нему доступ, а тем более код снаружиinit.

Я говорю «это» выше, но на самом деле у вас есть несколько функций reset, по одному для каждого изображения.

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

Answer 4

Спасибо, ребята, я узнал что-то сегодня! Вот мой рабочий пример. Действительно очень аккуратно:

var resets = []; 

    document.getElementsByClassName('zoomer-start')[0].addEventListener('click', init); 

    document.getElementsByClassName('zoomer-reset')[0].addEventListener('click', function() { 
     var images = document.querySelectorAll('.zoomer-img'); 

     for (var i = 0; i < images.length; i++) { 
      resets[i](); 
     } 
    }); 

    function init() { 
     var images = document.querySelectorAll('.zoomer-img'); 

     for (var i = 0; i < images.length; i++) { 
      (function(i) { 
       var image = images[i]; 

       var zoomer = new Hammer(image); 

       zoomer.get('pinch').set({enable: false}); 
       zoomer.get('pan').set({enable: false}); 

       var clicked = false; 

       var adjustScale = 1; 
       var adjustDeltaX = 0; 
       var adjustDeltaY = 0; 

       var currentScale = null; 
       var currentDeltaX = null; 
       var currentDeltaY = null; 

       zoomer.on('tap', function (e) { 
        if (!clicked) { 
         zoomer.get('pinch').set({enable: true}); 
         zoomer.get('pan').set({enable: true, direction: Hammer.DIRECTION_ALL}); 
         clicked = true; 
        } else { 
         zoomer.get('pinch').set({enable: false}); 
         zoomer.get('pan').set({enable: false}); 
         clicked = false; 
        } 

        if (currentScale > 1) { 
         adjustScale = 1; 
         adjustDeltaX = 0; 
         adjustDeltaY = 0; 
        } else { 
         adjustScale = 2; 
        } 

        currentScale = adjustScale * e.scale; 
        currentDeltaX = adjustDeltaX + (e.deltaX/currentScale); 
        currentDeltaY = adjustDeltaY + (e.deltaY/currentScale); 

        image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)'; 
       }); 

       zoomer.on('pan pinch', function (e) { 
        currentScale = Math.max(1, Math.min(adjustScale * e.scale, 4)); 
        currentDeltaX = adjustDeltaX + (e.deltaX/currentScale); 
        currentDeltaY = adjustDeltaY + (e.deltaY/currentScale); 

        var scaledX = ((((image.width * currentScale)/2) - (image.width/2))/currentScale); 
        if (currentDeltaX > scaledX) 
         currentDeltaX = scaledX; 
        if (currentDeltaX < -scaledX) 
         currentDeltaX = -scaledX; 

        var scaledY = ((((image.height * currentScale)/2) - (image.height/2))/currentScale); 
        if (currentDeltaY > scaledY) 
         currentDeltaY = scaledY; 
        if (currentDeltaY < -scaledY) 
         currentDeltaY = -scaledY; 

        image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)'; 
       }); 

       zoomer.on('panend pinchend', function() { 
        adjustScale = currentScale; 
        adjustDeltaX = currentDeltaX; 
        adjustDeltaY = currentDeltaY; 
       }); 

       resets[i] = function reset() { 
        zoomer.get('pinch').set({enable: false}); 
        zoomer.get('pan').set({enable: false}); 

        clicked = false; 

        adjustScale = 1; 
        adjustDeltaX = 0; 
        adjustDeltaY = 0; 

        currentScale = null; 
        currentDeltaX = null; 
        currentDeltaY = null; 

        image.style.transform = 'scale(' + 1 + ') translate3d(' + 0 + 'px, ' + 0 + 'px, 0)'; 
       } 
      })(i); 
     } 
    }