Javascript 从外部函数绑定事件侦听器

如何从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)';
                }
            })();
        }
    }

document.getElementsByClassName（'zoomer-start'）[0]。addEventListener（'click'，init）；
document.getElementsByCassName（'zoomer-reset'）[0]。addEventListener（'click'，reset'）；
函数init（）{
var images=document.querySelectorAll（'.zoomer img'）；
对于（var i=0；i1）{
调整比例=1；
调整所得税=0；
adjustDeltaY=0；
}否则{
调整比例=2；
}
当前刻度=调整刻度*e.刻度；
currentDeltaX=调整deltaX+（如deltaX/currentScale）；
currentDeltaY=调整deltaY+（如deltaY/currentScale）；
image.style.transform='scale（'+currentScale+'）translate3d（'+currentDeltaX+'px'，+currentDeltaY+'px，0'）；
});
zoomer.on（'pan pinch'，函数（e）{
currentScale=数学最大值（1，数学最小值（adjustScale*e.scale，4））；
currentDeltaX=调整deltaX+（如deltaX/currentScale）；
currentDeltaY=调整deltaY+（如deltaY/currentScale）；
var scaledX=（（（image.width*currentScale）/2）-（image.width/2））/currentScale）；
如果（currentDeltaX>scaledX）
currentDeltaX=scaledX；
如果（currentDeltaX<-scaledX）
currentDeltaX=-scaledX；
var scaledY=（（（image.height*currentScale）/2）-（image.height/2））/currentScale）；
如果（currentDeltaY>scaledY）
currentDeltaY=scaledY；
如果（当前Deltay<-缩放）
currentDeltaY=-scaledY；
image.style.transform='scale（'+currentScale+'）translate3d（'+currentDeltaX+'px'，+currentDeltaY+'px，0'）；
});
zoomer.on（'panend pinchend'，函数（）{
调整标度=当前标度；
adjustDeltaX=当前Deltax；
adjustDeltaY=当前Deltay；
});
函数重置（）{
get（'pinch'）.set（{enable:false}）；
get（'pan'）.set（{enable:false}）；
单击=假；
调整比例=1；
调整所得税=0；
adjustDeltaY=0；
currentScale=null；
currentDeltaX=null；
currentDeltaY=null；
image.style.transform='scale（'+1+'）translate3d（'+0+'px'，+0+'px，0'）；
}
})();
}
}

将函数放在init函数内只会给它们提供私有作用域（只能从init函数内访问）要给它们提供全局作用域，必须将它们移到init函数外，这需要一些代码重组。

将函数放在init函数内只会给它们提供私有作用域（只能从init函数中访问）要给它们全局作用域，您必须将它们移到init函数之外，这将需要一些代码重组。

对于编写的代码，您不能这样做。

reset

函数对于

init

内的匿名函数中的代码是完全私有的。

init

中的其他代码也不能访问它，更不用说了代码在

init

之外

我在上面说“it”，但实际上，您有多个

reset

函数，每个图像一个

---

当然，您可以将试图将其用作单击处理程序的代码移动到

init

内部的匿名函数中。这基本上是您唯一的实际选择，而不是创建数组或类似的

reset

函数，您在

init

外部公开这些函数，而代码是编写好的，您无法执行e> 函数对于

init

内部的匿名函数中的代码是完全私有的。即使

init

中的其他代码也无法访问它，更不用说

init

外部的代码了

我在上面说“it”，但实际上，您有多个

reset

函数，每个图像一个

当然，您可以将试图将其用作单击处理程序的代码移动到

init

内部的匿名函数中。这基本上是您唯一的实际选择，而不是创建数组或类似的

reset

函数，这些函数在

i外部公开
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(); } );

    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);
        }
    }