Question

这可能很容易，但由于树木，我无法看到森林。我有几个单词阵列和淡入淡出时间。

这应该发生： 在开始的数组中，PartA会根据每个时间添加到div中。为此，我使用setTimeout（）。

无效。 如果用户点击从partA添加的链接，则数组partB（或partN）中的单词也应附加到div。如何将当前感兴趣的数组传递给function buildString(what)？

这是我挂的地方

  
// WORDS!
partA = [ 
        ["Hello", 300],
        ["my", 300],
        ["name", 300],
        ["<a href='#' class='partB' >is</a>", 600],
        [".", 300],
    ];

PartB = [
        ["Good", 300],
        ["Bye", 300]
    ];

// Function to iterate over array
var i = 1;
function buildString(what) {
   $('div').append(partA[i-1][0]+' ');
   if(i > partA.length-1) return;
   i++;
   window.setTimeout(buildString, partA[i-1][1]);
}

// Bind click on link to continue with different array
$('a.partB').click(function(e){
  e.preventDefault();
  // Continue with part B
  // Not working
	buildString(partB);
})

// Begin with first array
buildString(partA);

#div {
    font-size: 50pt;
    font-family: Arial;
    letter-spacing: -1px;
    margin:2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>

修改当我在setTimeout函数中使用什么并注入数组时：

function buildString(what) {
   $('div').append(what[i-1][0]+' ');
   if(i > what.length-1) return;
   i++;
   window.setTimeout(buildString(what), what[i-1][1]);
}

这些单词不会一个接一个地附加，但会添加整个刺痛。

https://jsfiddle.net/telemark/yxkazn1k/2/

Answer 1

你是说这样的意思吗？ https://jsfiddle.net/hallleron/4x93qx1x/

我使用for循环执行并在每个cicle中添加超时值：

var box = $('div');
var before;
function buildString(array) {
    before = 0;
   for(var i = 0; i < array.length; i++){
    appendToBox(array[i]);
   }
}

function appendToBox(obj){
    setTimeout(function(){
        box.append(obj[0] + ' ');
    }, obj[1] + before);
    before += obj[1];
}

使用此方法可确保每个超时值都能正确执行。

修改

你可以根据需要将尽可能多的数组传递给buildString（array）函数。

Answer 2

在buildString函数中，您没有使用参数。
我认为在全局i中使用内部索引会好得多。
如果您创建一个元素（就像您对链接所做的那样），那么第三个也是最重要的，你不能绑定一个已经不存在的元素的事件。

你能做的就像我在例子中所做的那样bind the click event to an anchestor。基本上，您将click事件绑定到类a.partB

  
// WORDS!
partA = [ 
        ["Hello", 300],
        ["my", 300],
        ["name", 300],
        ["<a href='#' class='partB' >is</a>", 600],
        [".", 300],
    ];

partB = [
        ["Good", 300],
        ["Bye", 300]
    ];

// Function to iterate over array
function buildString(part, index) {
   console.log('part');
   console.log(part);
   console.log('with index ' + index);
   console.log(part[index]);
   $('div').append(part[index][0]+' ');
   if(index == part.length-1) return;
   index++;
   window.setTimeout(buildString, part[index-1][1], part, index);
}

$(document).on('click', 'a.partB', function(e){
  e.preventDefault();
  // Continue with part B
  console.log('here we go B');
	buildString(partB, 0);
});

buildString(partA, 0);

#div {
    font-size: 50pt;
    font-family: Arial;
    letter-spacing: -1px;
    margin:2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>

Answer 3

Working fiddle example

  // Function to iterate over array -> buildString(partA);
  function buildString(arr) {
    arr.forEach(function(item) {
      setTimeout($('#div').append(item[0] + ' '), item[1]);
    })
  }
  $(document).on('click', 'a.partB', function(e) {
    buildString(partB);
  });
  buildString(partA);

将不同数组中的单词追加到div

3 个答案: