jQuery click函数绑定的nname运行时求值，仅能关闭最后一个通知如何解决？

该问题属于典型的闭包变量捕获问题：原始代码中nname没有显式声明为局部变量，默认成为全局变量，每次调用show_notification都会覆盖这个全局变量的值。而click回调函数是异步触发的，执行时读取的是已经被覆盖到最终值的nname，因此所有关闭操作都只会定位到最后一个通知。

以下是三种可行的解决方案：

方案1：使用块级作用域绑定当前值（最简洁） #

在声明nname时添加let关键字，利用ES6的块级作用域特性，每次函数调用都会生成独立的nname绑定，回调会捕获当前调用栈下的变量值：

let nc = 0;
function show_notification(data){    
    let nname = "notification_" + nc
    $('body').append('<div id="' + nname + '" class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>');
    $('#' + nname).fadeIn("slow").append('some new information');
    $('#' + nname + ' .dismiss').click(function(){$("#" + nname).fadeOut("slow");});
    nc++;
}

方案2：利用DOM上下文避免依赖外部变量（更鲁棒） #

不需要依赖ID变量，点击关闭按钮时直接查找当前点击元素对应的父级通知节点，完全避开变量捕获问题：

let nc = 0;
function show_notification(data){    
    const nname = "notification_" + nc
    $('body').append('<div id="' + nname + '" class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>');
    $('#' + nname).fadeIn("slow").append('some new information');
    // 直接通过点击事件的目标元素查找所属通知
    $('#' + nname + ' .dismiss').click(function(){
        $(this).closest('.notification').fadeOut("slow");
    });
    nc++;
}

方案3：IIFE封装变量（兼容ES5及更早版本） #

如果需要兼容不支持ES6的老旧环境，可以用立即执行函数把当前nname的值封装到独立作用域里：

var nc = 0;
function show_notification(data){    
    var nname = "notification_" + nc
    $('body').append('<div id="' + nname + '" class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>');
    $('#' + nname).fadeIn("slow").append('some new information');
    // 用IIFE把当前nname的值固化到独立作用域
    (function(currentName) {
        $('#' + currentName + ' .dismiss').click(function(){
            $("#" + currentName).fadeOut("slow");
        });
    })(nname);
    nc++;
}

内容的提问来源于stack exchange，提问作者pi511