在js数组中不断循环并暂停

Loop through js array continually with pauses

本文关键字：循环 暂停 js 数组      更新时间：2023-09-26

我想在单击时连续循环一个数组。如果你可以在类开关之间的延迟中工作，则需要额外的道具：-）

我走了这么远：

// Define word
var text = "textthing";
// Define canvas
var canvas = 'section';
// Split word into parts
text.split();
// Loop over text
$(canvas).click(function() {
    $.each(text, function(key, val) {
        $(canvas).removeAttr('class').addClass(val);
    });
});

一点也不远：-）

有什么建议吗？

以下内容将等待，直到您在var el中单击所选元素。在本例中，var el = $('section')将选择文档中的所有<section>...</section>元素。

然后，它将开始循环使用cssClassNames中的值，依次使用每个值作为所选元素的css类名。在每次类别更改之间将使用delayInMillis的延迟。

var cssClassNames = ['c1', 'c2', 'c3'];
var el = $('section');
var delayInMillis = 1000;
// Loop over text
el.click(function() {
  var i = 0;
  function f() {
    if( i >= cssClassNames.length ) {
      i = 0;
    }
    var currentClass = cssClassNames[i];
    i += 1;
    el.removeClass().addClass(currentClass);
    setTimeout(f, delayInMillis);
  }
  f();
});

我相信在删除类和添加类之间需要X毫秒的延迟。我不确定你是否必须把线标出来//？甚至他们完成了这项工作，但你必须有一种方法来将价值融入函数中。此外，setTimeout anon函数实际上可能不需要这些参数，但它应该会给您一个想法。

$(canvas).click(function() {
    $.each(text, function(key, val) {
        $(canvas).removeAttr('class')
        var $canvas = $(canvas) //?
        var class_val = val  //?
        setTimeout(function ($canvas, class_val) {
            $canvas.addClass(class_val);
        }, 2000);
   });
});

编辑：我会这么做函数modify_element（$element，class_name）{$element.removeClass（'class'）；setTimeout（函数（$element）{$element.addClass（类名）；}，1000）；//删除类后1秒添加该类}

$(canvas).click(function() {
    $.each(text, function(key, val) {
        setTimeout(modify_element($(canvas), val),2000);
        //this will loop over the elements with 2 seconds between elements
    });
});

"在数组上连续循环"这听起来像是一个无限循环，我认为你不希望这样。关于暂停循环，这是可能的，你可以使用这个

相关文章：