“排队”非动画属性：attr

Question

更新：好的，所以我看到我可以将每个 attr 替换包含在计时器的函数中。这意味着我会这样做五次；每个图形一次。但是，有没有更干净的方法来做到这一点？谢谢

，好的，所以我有五个不同的图像想要替换 src。但是，我希望每个都是连续的......替换第一个，然后替换第二个等等。

由于我正在更改属性源，动画队列将无济于事。

我尝试了简单的计时器插件并将其放入一个函数中，然后在每次 attr 替换后调用该函数，但所有 attr 都在函数调用之前发生。

然后，我将计时器函数、attr 替换以及对计时器函数的调用全部放在一个函数中，加载文档并调用该函数，但 attr 仍然一次性发生，然后函数调用。

所以，这是我在上面解释的最后一件事：

$(document).ready(function() {
 function holdIt(){
  myTimer = $.timer(2000,function(){
   alert("yes");
  });
 };
function doMe() {
$('#visit').attr('src', 'images/visitGrow.jpg');
holdIt();
$('#real').attr('src', 'images/realGrow.jpg');
holdIt();
$('#life').attr('src', 'images/lifeGrow.jpg');
holdIt();
$('#retirement').attr('src', 'images/retirementGrow.jpg');
holdIt();
$('#center').attr('src', 'images/centerGrow.jpg');
};

doMe();
 });
 </script>

我知道我错过了一些东西，因为它必须很容易完成，但我还没有。有什么指点吗？ PS...我正在使用简单的计时器插件。

另外，我应该注意，我只是在每次 attr 替换后寻找暂停，以便警报（'yes'）;是的，我想我只会返回 false 或 null；或其他什么。

Answer 1

(function () {
    var items = $("#visit, #real, #life, #retirement, #center");
    var len = items.size();
    var urls = ["images/visitGrow.jpg", "images/realGrow.jpg", .........];
    var i = 0;

    function step() {
        items.eq(i).attr("src", urls[i]);
        i += 1;
        if (i >= len) {
            return;
        }
        setTimeout(step, 2000);
    }

    step();
})();

顺便说一句，自执行包装函数在这里创建一个本地范围，这样你就不会污染全局命名空间......

Answer 2

您可以使用一个简单的间隔，如下所示：

$(function() {
  var imgs = ["visit", "real", "life", "retirement", "center"], i=0,
  timer =  setInterval(function() {
    $("#" + imgs[i]).attr("src", "images/"+imgs[i]+"Grow.jpg");
    if(i++ == imgs.length) clearInterval(timer);
  }, 2000);
});

这利用了图像 URL 的约定，因此我们只是每 2 秒遍历一次数组，然后到达末尾，间隔就不会再次触发。