闭包的问题中执行touchmove事件的问题

Question

要求点击图片出现弹窗 弹窗出现的时候，根据图片高 > 屏幕高，来判断是否阻止底层滚动，

现在问题是，当我第一次点击出现弹出层时候，图片高度可以获取到 判断也没问题

 但是当我点击一个长图的时候，执行touchmove事件时候，图片高度出现了2种分别为第一次的弹窗图片240 跟最新的图片高度，

我是在这里 执行完弹出层后执行回调函数getPopImgHeight，

 我就不明白为什么再点击的时候回有上次的变量 ，

而且 应该再出现弹出层的时候 不应该重新获取img的高度 吧上一个覆盖了吗？求大神帮忙解答下。。谢谢

<div id="popup-box">    <div id="popclose"></div>    <div class="imgbox" id="imgbox">        <img src="">    </div>    <div class="h6box in"></div></div>

var popBox = $('#popup-box'),    popImg = popBox.find('img'),    popText = popBox.find('.h6box');var screenH = $(window).height();function getPopImgHeight() {    var imgHeight = popImg.height();    console.log('原来的'+imgHeight);    $('#imgbox').on('touchstart', function() {        popText.attr('class', 'h6box out');    });    $('#imgbox').on('touchmove', function() {        console.log('imgHeight:' + imgHeight);        console.log(imgHeight < screenH);        if (imgHeight < screenH) { // 阻止滚动             console.log('1')             // return false;        } else { // 允许滚动             console.log('2')             // return true;        }    });}$('.baoImgQ').on('click', 'a', function() {    stopDefault();    var imgLen = $(this).find('img').length;    if (imgLen > 0) {        var imgSrc = getRealSrc($(this).attr('href'));        var hText = $(this).parent().next().next('h6').text();        console.log(imgSrc + ';' + hText);        addPopContent(imgSrc, hText);        popBox.fadeIn('fast', getPopImgHeight);    }});// 关闭时候重置$('#popclose').on('click', function() {    popBox.fadeOut('fast');    popImg.attr('src', '');    popText.text('').attr('class', 'h6box in').show();});

function getPopImgHeight() {

    var imgHeight = popImg.height();

    console.log('原来的'+imgHeight);

    $('#imgbox').on('touchstart', function() {

        popText.attr('class', 'h6box out');

    });

    $('#imgbox').on('touchmove', function() {

        console.log('imgHeight:' + imgHeight);

        console.log(imgHeight < screenH);

        if (imgHeight < screenH) { // 阻止滚动

             console.log('1')

             // return false;

        } else { // 允许滚动

             console.log('2')

             // return true;

        }

    });

}

$('.baoImgQ').on('click', 'a', function() {

    stopDefault();

    var imgLen = $(this).find('img').length;

    if (imgLen > 0) {

        var imgSrc = getRealSrc($(this).attr('href'));

        var hText = $(this).parent().next().next('h6').text();

        console.log(imgSrc + ';' + hText);

        addPopContent(imgSrc, hText);

        popBox.fadeIn('fast', getPopImgHeight);

    }

});

Answer 1

在js中闭包通常用来存储私有数据,它是普通函数的一种扩展。简单来说闭包函数引用了外层函数的局部就变量。正常情况下，函数调用完，函数内的临时局部变量在内存中的存储单元会被释放。但调用闭包不会，它会保留上次执行状态。从某种意义上来讲，闭包是有状态的函数。示例如下fn = function(){     var i = 0     return function(){         i++         console.log(i)     } } f = fn() f() // 1 f() // 2 f() // 3 fn2 = function(){     var i = 0     console.log(i) } fn2(()   // 0 fn2()   // 0换句话来说，你要注意js的函数嵌套，尤其是内层函数使用了外层函数中的局部变量的情况。