如何在启动第二个函数时停止第一个正在运行的JavaScript函数？

1. 取消初始自动加载 #

直接删除代码里的cargadorProductos(productos);这一行，页面加载时就不会自动执行第一个函数加载产品了。

2. 复用函数精简代码 #

你按钮点击事件里的逻辑和cargadorProductos函数完全重复，没必要重新写一遍。直接复用这个函数，把按钮事件里的代码替换成调用cargadorProductos(cara)即可，既简洁又好维护。

修改后的完整代码 #

function cargadorProductos(productos) {
    contenedorProductos.innerHTML = "";

    productos.forEach(producto => {
        let div = document.createElement('div');
        div.classList.add("producto");
        div.innerHTML = `
            <img class="foto" src="${producto.img}" alt="cara"> 
            <div class="descripcion"> <h3> Brocha difuminadora </h3> </div>
            <div class="precio"> <h3>${producto.precio}</h3> </div>
            <button class="boton" type="button" id="${producto.id}"> Comprar! </button> 
        `;

        contenedorProductos.append(div); 
    });
}

// 移除自动调用的代码行：cargadorProductos(productos); 

botonCara.addEventListener('click', () => { 
    cargadorProductos(cara); // 复用已有函数加载目标数组产品
});

修改后，页面加载时不会显示任何产品，只有点击botonCara按钮时，才会触发函数加载cara数组里的产品，完全符合你的需求。

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