javascript - 无间隔停止函数循环

标签 javascript jquery

我有一个名为 particleAppear 的 JS 函数,它是一个循环:

var particles = new Array("pt0","pt1","pt2","pt3");

function particleAppear(){
    var genPoint = Math.floor(Math.random() * (720 - 4 + 1)) + 4;
    var particle = particles[Math.floor(Math.random()*particles.length)];

    $('#particles').append('<div class="'+particle+'" style="position: absolute; top: '+genPoint+'px; left: -4px"></div>');

    var rtime1 = Math.floor(Math.random() * (42000 - 32000 + 1)) + 32000;
    var rtime2 = Math.floor(Math.random() * (42000 - 32000 + 1)) + 32000;
    var rtime3 = Math.floor(Math.random() * (42000 - 32000 + 1)) + 32000;
    var rtime4 = Math.floor(Math.random() * (42000 - 32000 + 1)) + 32000;

    $('.pt0').animate({left: '+=1280px'}, rtime1, "linear",function(){
        $(this).remove();
    });
    $('.pt1').animate({left: '+=1280px'}, rtime2, "linear",function(){
        $(this).remove();
    });
    $('.pt2').animate({left: '+=1280px'}, rtime3, "linear",function(){
        $(this).remove();
    });
    $('.pt3').animate({left: '+=1280px'}, rtime4, "linear",function(){
        $(this).remove();
    });

    var randomTimeGen = Math.floor(Math.random() * (1500 - 450 + 1)) + 450;
    setTimeout(particleAppear,randomTimeGen);
}

如您所见,使用的循环不是 setInterval 而是 setTimeout,它会在 450 到 1500 毫秒之间的随机时间后重新运行该函数。我怎样才能使用 JAVASCRIPT/JQUERY 停止它?

最佳答案

您可以将超时的数字 id 存储在变量中并清除它:

var timeout = setTimeout(particleAppear,randomTimeGen);

clearTimeout(timeout);

关于javascript - 无间隔停止函数循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29518671/

相关文章:

java - 将数据从 Javascript 传递到 Android WebView

javascript - 正则表达式搜索 html 返回,但不是实际的 html jQuery

javascript - 需要与异步函数执行流程相关的帮助(await、promise、node.js)

javascript - 如何一个接一个地执行 jquery 函数(以及其他几个问题)

javascript - 需要限制单个小数的文本框输入

javascript - Web Audio API 无法在 iOS 版本 13.3 上播放。适用于旧版本的 iOS

javascript - 按属性对对象数组进行排序

jquery - 选中/取消选中后的 CSS 动画

javascript - 我如何在鼠标悬停时将鼠标光标更改为 "default"但在可排序中使用 jquery 为 "move"

javascript - Gridster 将数据序列化为 1-5 顺序(递归循环)?