个人中心
gpt4 book ai didi

How can I stop a function from running when I want to start a second one?(当我想要启动第二个函数时，如何停止运行一个函数？)

转载 作者：bug小助手 更新时间：2023-10-25 23:32:54 27 4
gpt4 key购买 nike



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 cannot stop a function on a button click. Why do you even need this? How long does the first function take to run?

您不能通过单击按钮来停止功能。你为什么需要这个？第一个函数运行多长时间？

@tkausl he can control with a for loop and an extra variable but I don't see the practicality because he won't have the chance to trigger a stop before it runs till the end.

@tkaul他可以通过一个for循环和一个额外的变量来控制，但我看不出它的实用性，因为在它运行到最后之前，他没有机会触发停止。

Maybe render a part of the array instead productos.slice(0, 100)

也许可以呈现数组的一部分，而不是产生.Slice(0,100)

@tkausl that's the anwer, namely "no you can't". Please write it up as an answer, with reference to JavaScript being single threaded and a fuller explanation as you wish.

@tkausl这就是答案，即“不，你不能”。请把它写出来作为一个答案，参考JavaScript是单线程的，并根据你的意愿给出更完整的解释。

优秀答案推荐

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>




更多回答

27 4 0
文章推荐： How can I get data with python socketio?(我怎样才能用pythonSocketio获取数据？)
文章推荐： passing class member variables to the start routine that is passed into pthread_create [duplicate](将类成员变量传递给启动例程，该例程将传递给pthline_create[Duplica])
文章推荐： Kotlin multiplatform: Accessing build variables in code(Kotlin多平台：在代码中访问构建变量)
文章推荐： I am using the TSL Mastodon API, I wrote a simple function to grab images from a url and upload them to Mastodon but getting unexpected results(我正在使用TSL Mastodon API，我编写了一个简单的函数来从URL获取图像并将它们上传到Mastodon，但得到了意想不到的结果)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com