javascript 运行函数在迭代中有延迟

Question

我想延迟查找带有 javascript 的元素。第一步我做了这个并且它有效。

function mytag() {
  var elements = document.getElementsByTagName('div');

  for (var i=0, im=elements.length; im>i; i++) {
    if (elements[i].className ==='hi'){

        alert('found');

    }}
  }

在第二步中，我对代码进行了一些更改以在迭代之间设置延迟。我关注了 this link 但无法正常工作。怎么了？

function mytag() {
  var elements = document.getElementsByTagName('div'); 

  for (var i=0, im=elements.length; im>i; i++) {
   (function(i){
      setTimeout(function(){
        if (elements[i].className ==='hi'){
          alert('found!');
        }
      }, 3000 * i);
    }(i));
  }
}

Answer 1

function sleep(milliseconds) {
    var start = new Date().getTime();
    while (1) {
        if ((new Date().getTime() - start) > milliseconds) {
            break;
        }
    }
} // sleep end

然后在循环中调用 sleep(3000)。

编辑：这是延迟的阻塞方式。对于异步、非阻塞延迟，您可以使用递归函数。

Answer 2

下面是一个示例，说明如何将异步添加到查找函数中：

function findElements() {
  var elements = document.getElementsByTagName('div'); 
  var index = 0;

  var findNext = function() {
    var element = elements[index];
    index++;

    if (element.className === 'hi'){
      // Item found
      console.log('found:'+element);
    }

    if (index < elements.length) {
      setTimeout(findNext, 100);
    }
  };

  findNext();
}

findElements();

http://jsbin.com/zeseguribo/1/edit?html,js,console

javascript 运行函数在迭代中有延迟

javascript run function with delay inside the iteration

javascript

dom

jscript

javascript 运行 函数在迭代中有延迟

javascript run function with delay inside the iteration

javascript

dom

jscript

javascript 运行函数在迭代中有延迟