setTimeout, JavaScript, 没有效果答案

【问题标题】：setTimeout, JavaScript, no effectsetTimeout, JavaScript, 没有效果
【发布时间】：2016-01-19 13:15:23
【问题描述】：

我需要制作动画，但我的声明没有效果。我的代码：

var movei=function(img){
     img.setAttribute("src", "blank.png");
}

var comp=function() {
    ...    
    for(var k=0; k<i; k++) {
        var img=document.getElementById(id(k,col));
        img.setAttribute("src", "circ1.png");
        timer=setTimeout(movei(img),1000);
        ...
    }
}

我阅读了有关setTimeout (setInterval) 的另一个问题，但找不到答案。

【问题讨论】：

movei() 立即执行函数。要传递回调，请不要调用它：setTimeout(movei, 1000).
您可以添加匿名函数并调用movei(img)
@DnisterLark 这个我试过了，结果好像没用过setTimeout
你是否意识到一旦你修复了你的错误，所有的图像都会在一秒钟内被准确地调用？
试试这个：timer=setTimeout(movei.bind(null,img),1000) 或 timer=setTimeout(function(){movei(img)},1000)

标签： javascript settimeout

【解决方案1】：

试试timer=setTimeout(function(){movei(img);},1000);

【讨论】：

【解决方案2】：

如果你想为单个元素设置动画，你应该使用递归而不是循环。

以下代码描述相同：

var count = 0;

function getId(count) {
  return "div_" + count;
}

function initTimer() {
  setTimeout(function() {
    count++;
    var _id = getId(count);
    var _el = document.getElementById(_id);
    show(_el);
    if (count < 7)
      initTimer();
  }, 1000);
}

function show(el) {
  el.style.display = "block";
}

initTimer();

div {
  display: none;
}

<div id="div_1">1</div>
<div id="div_2">2</div>
<div id="div_3">3</div>
<div id="div_4">4</div>
<div id="div_5">5</div>
<div id="div_6">6</div>

【讨论】：

【解决方案3】：

正如@deceze 也写的那样，您需要更改对 setTimeout 的调用，这样您就不会调用 movei 函数，而是传递函数“名称”。那么你就必须改变函数 movei 的行为，这样它要么获取图像的简单字符串名称，要么可以查找图像本身。

timer=setTimeout(movei,1000);

或（以不推荐的方式）

timer=setTimeout("movei(\"imgName\")",1000);

【讨论】：

请不要建议将回调作为字符串传递。
在这种情况下字符串方法无论如何都会失败
@deceze，您能否详细说明一下为什么我不应该将回调作为字符串提及？我不会将它作为我的首选，但它在某些情况下可以解决问题？
无论你可以对字符串做什么，你也可以直接传递函数对象。在这种情况下，movei.bind(null, imgName) 或 function () { movei(imgName); }。字符串在全局范围内进行评估，这不必要地增加了范围问题和开销。
谢谢，@deceze，我喜欢 function () { movei(imgName); } 的方式。我会把它放到工具箱里 ;-)