I created a function to go through an array to load some products on my website, then I created an element.eventListener to run another different array. I don't want the first function to keep going and keep loading products from the first array. I only want the eventListener to work when clicking a button.

我创建了一个函数来遍历一个数组以在我的网站上加载一些产品，然后我创建了一个element.eventListener来运行另一个不同的数组。我不希望第一个函数继续运行，并继续从第一个数组加载产品。我只希望EventListener在单击按钮时工作。

This is what I am trying:

这就是我正在尝试的：

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); 
 ** // this is first function, all good till here. but then I want to stop this and run below.     **



  botonCara.addEventListener('click',  () => { 
       

    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);   **   

You won't be able to achieve this with a for loop. You need to be able to run the functions in parallel. One way to do this would be to use setInterval or setTimeout

使用for循环无法实现这一点。您需要能够并行运行这些函数。一种方法是使用setInterval或setTimeout

Here is a sample implementation:

以下是一个示例实现：

The idea here is that the function inside the setinterval will keep running unless interrupted by the function at the click of a button. When the button clicks, it shall clear the current running timer & hence the loop.

这里的想法是，setInterval内的函数将继续运行，除非在单击按钮时被该函数中断。当按钮点击时，它将清除当前运行的计时器&因此循环。

// Dummy data & Variables
var productos = [{img: "", precio: "One", id: 1}, {img: "", precio: "Two", id: 2}, {img: "", precio: "Three", id: 3 }]
var cara = [{img: "", precio: "NewOne", id: 1}, {img: "", precio: "NewTwo", id: 2}, {img: "", precio: "NewThree", id: 3 }]

var contenedorProductos = document.getElementById("contenedorProductos");
var botonCara = document.getElementById("botonCara");

// Variables to control the load
var currentIndex = 0, interval = 1000, timer = 0;

function cargadorProductos(productos) {
  contenedorProductos.innerHTML = "";
  timer = setInterval(() => {
    let producto = productos[currentIndex++];
    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);

    if (currentIndex == productos.length) clearInterval(timer);
  }, interval);
}

cargadorProductos(productos);

botonCara.addEventListener('click', () => {
  clearInterval(timer);
  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);
  });
});

<button id="botonCara">botonCara</button>
<div id="contenedorProductos"></div>