Question

如何从init函数的外部启动init中的reset函数。

我希望我的重置功能重置从图像集合（本例中为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

将函数放在init函数中只给它们私有SCOPE（只能在init函数中访问）要给它们全局作用域，你必须将它们移到init函数之外，这需要进行一些代码重构。 / p>

Answer 2

使用编写的代码，你不能。 reset函数对init内的匿名函数中的代码完全是私有的。即使init中的其他代码也无法访问它，更不用说外的代码 init。

我在上面说“它”，但实际上，你有多个reset函数，每个图像一个。

当然，你可以移动你的代码，试图将它作为点击处理程序用于 init内的匿名函数。这基本上是你唯一真正的选择，除了创建一个数组或类似的reset函数，你在init之外公开。

Answer 3

要从内部范围调用函数，您必须以某种方式将其传递到surronding范围。您的代码的一个可能示例：

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

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

4 个答案: