动态生成多个js函数，并在生成后立即执行

本文链接：https://blog.youkuaiyun.com/howard789/article/details/86991254

本文介绍了一种在未知产品数量的情况下，通过动态生成JS监听函数实现用户选择后实时更新费用的方法。利用Ajax获取产品信息，自定义函数生成监听器，确保计算过程在前端完成，减轻服务器负担。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目有个需求，动态写入节点（产品）并监听，如果用户点击后重新计算费用，但事先不知道产品的数量和内容，所以jsp的勾选框是动态生成的，生成jsp的勾选框后，又要动态生成js function，对每一个勾选框分别监听，监听到用户点击后，改变那个框的值，并执行计算费用的程序。

这里用动态js的目的是不希望增加后台服务器的负担，所以请求一次后，所有后续操作的计算都在js里计算，不再请求后台

解决思路：

1. 先用ajax调用后台，返回需要生成的产品数量和每个产品的金额 , 假设这里请求的结果是要生成4个产品

2. 先将函数名称用一个规则定义，这样只要知道最终要生成的数量，就可以生成相应的监听函数。例如我用的名称是listern+i (i从0开始，第一个产品的函数名就是listen0，4个产品就生成listen0-listen4的函数)

2. 将生成的函数，动态添加script节点，写入一个自定义的函数的方法里，例子里用的是startListening, 最后动态写入以下节点

fucntion startListening(){

listen0(); listen1(); listen2(); listen3();

}

3. 在初始化的function里最末段执行startListening函数, 执行到这行的时候，无论有多少个产品，startListening函数都已经被创建了，不会有undefined的情况

可以复用的核心代码，动态增加script节点，入参是方法名和要要执行的内容

//添加script节点
function addScript(funcName,funcCode) {
    //funcCode的范例 function sayHi() {alert('hi');}
    var fullCode="function "+funcName+"(){"
    fullCode+=funcCode+";}"
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(fullCode));
    } catch (ex) {
        script.text = fullCode;
    }
    document.body.appendChild(script);
}