闭包的问题中执行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的函数嵌套，尤其是内层函数使用了外层函数中的局部变量的情况。