如何重启或多实例运行particles.js并解决pJS不是函数报错

错误原因 #

原版particles.js存在设计逻辑缺陷：首次调用全局pJS函数完成粒子初始化后，库会自动将window.pJS变量覆盖为生成的粒子实例对象，导致第二次调用时pJS已不再是可执行函数，直接抛出类型错误。

最优解决方案 #

通过缓存原始构造函数+调用前清理旧实例的方式实现无限次调用，步骤如下：

1. 页面初始化、粒子库加载完成后，先缓存原始的pJS构造函数，避免被后续生成的实例覆盖
2. 封装初始化函数，每次调用前先清理对应容器内的旧粒子实例、残留DOM元素，避免冲突
3. 统一调用缓存的原始构造函数完成初始化

完整可运行代码示例 #

// 【关键】库加载完成后立即缓存原始pJS构造函数，必须放在第一次调用粒子函数前执行
const originPJS = window.pJS;

/* ---------- particles.js 封装初始化函数 ------------ */
function particles_bg(id){
    // 清理对应ID容器的旧实例与DOM
    const targetEl = document.getElementById(id);
    if (targetEl) {
        // 清空容器内之前生成的canvas等元素
        targetEl.innerHTML = '';
        // 移除全局实例数组中对应的旧实例记录
        if (window.pJSDom) {
            window.pJSDom = window.pJSDom.filter(instance => instance.el.id !== id);
        }
    }

    // 调用缓存的原始构造函数初始化
    originPJS(id, {
      "particles": {
        "number": {
          "value": 1500,
          "density": {
            "enable": true,
            "value_area": 700
          }
        },
        "color": {
          "value": "#ffffff"
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": true,
            "speed": 0.2,
            "opacity_min": 0,
            "sync": false
          }
        },
        "size": {
          "value": 2,
          "random": true,
          "anim": {
            "enable": true,
            "speed": 2,
            "size_min": 0,
            "sync": false
          }
        },
        "line_linked": {
          "enable": false,
          "distance": 150,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 0.2,
          "direction": "none",
          "random": true,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "bubble"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 400,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 85,
            "size": 1,
            "duration": 3,
            "opacity": 1,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    });
}
/* ---------- 多次调用测试 ------------ */
// 同时初始化多个容器
particles_bg('p1');
particles_bg('p2');
// 后续需要重启p1粒子时直接再次调用即可
// particles_bg('p1');

额外说明 #

如果仅需要刷新已有粒子实例不需要修改配置，可直接调用对应实例的refresh方法：

// 找到对应ID的实例调用刷新
const targetInstance = window.pJSDom.find(item => item.el.id === 'p1');
if (targetInstance) targetInstance.fn.refresh();

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