当我想启动第二个函数时，如何停止一个函数的运行。 (javascript)

Question

我在 javascript 中创建了一个函数来通过一个数组来加载我网站上的一些产品，然后我创建了一个 element.eventListener 来运行另一个不同的数组，但我不希望第一个函数继续运行并继续从第一个函数加载产品数组，我只希望事件监听器在单击按钮时工作。

我非常感谢您对此的帮助。

//这就是我正在尝试的

函数 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（产品）； ** // 这是第一个函数，到这里为止一切都很好。但后来我想停止这个并跑到下面。 **

botonCara.addEventListener('点击', () => {

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

    contenedorProductos.append(div); 
   
});    **//this works just fine, just want to stop  cargadorProductos(productos);   **   


         

Answer 1

将您正在执行的任何操作放入正常的

for

循环中，并保留一个变量来控制循环。

let running = true;

...

for(let i = 0; running  && i < productos.length; i+=1) {
  const producto = productos[i];
  const 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);
}

如果你想让它停止，请从外面的某个地方设置

running = false

。