javascript - 尝试传递选择器，但在第二次传递时传递了对象

Question

我正在尝试编写一个函数来每半秒更改一次图像 10 次迭代。在最后一次迭代中，图像 src 将被设置为实际值。这适用于第一个循环，但第一次setTimeout触发它通过object mo456而不是string。我正在使用 Firebug，控制台显示：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
function loopMoHolder(lmc,thisMoDivID){
    ++lmc;
    ffRan = parseInt(Math.floor((Math.random()*10)+1));
    console.log(lmc);
    console.log(thisMoDivID);
    $('#'+thisMoDivID+' .moHolder .ffbg img').attr('src','/img/moMoniker/mo'+ffRan+'.png');

    if (lmc <= 10) {
        setTimeout("loopMoHolder("+lmc+","+thisMoDivID+")" , 500); }
    else {
        $('#'+thisMoDivID+' .moHolder .ffbg img').attr('src','/img/moMoniker/mo10.png');
    }
    }
</script>

这是html

<div class="moHolder">
    <div id='mo456' class="moCol ffbg"><img src="/img/moMoniker/mo1.png"></div>
</div>

我确定问题出在 setTimeout 行，但我不确定如何纠正它。

Answer 1

您不应该使用字符串作为setInterval.. 的执行函数的参数。它应该是一个函数（匿名与否）。事实上，这就是问题所在。你所做的相当于调用：

loopMoHolder(valueOfLmc, valueOfThisMoDivId)

...插入到（显然）

loopMoHolder(9, #[object HTMLDivElement])

...这在语法上是不正确的。

相反，您可能想打电话

loopMoHolder(lmc, thisMoDivID)

...因为其他两个变量甚至可能不存在或无法正常工作，甚至可能导致语法无效。

setTimeout(function () {
    loopMoHolder(lmc, thisMoDivID)
}, 5000);

这听起来setInterval可能更合适，这样您就不必在方法本身中进行后续调用。

Answer 2

不要将 setTimeout 与字符串参数一起使用，尤其是在传递对象时。我大方地重写了你的一些代码。

function loopMoHolder(lmc, thisMoDivID){
    var ffRan   = Math.floor(Math.random() * 10 + 1),
        $el     = $('#' + thisMoDivID + ' .moHolder .ffbg img');

    $el.attr('src', '/img/moMoniker/mo' + ffRan + '.png');

    if (lmc <= 10) {
        setTimeout(function() {
            loopMoHolder(lmc + 1, thisMoDivID);
        }, 500);
    } else {
        $el.attr('src', '/img/moMoniker/mo10.png');
    }
}

Answer 3

var intervalId, intervalCount = 0,
    img = $('#mo456 .moHolder .ffbg img')[0],
    loopMoHolder = function(){
        var rand = parseInt(Math.floor((Math.random()*10)+1));
        if (++intervalCount < 10) {
            img.src = '/img/moMoniker/mo'+ rand +'.png';
        } else {
            img.src = '/img/moMoniker/mo10.png';
            window.clearInterval(intervalId);
        }
     };

intervalId = window.setInterval(loopMoHolder, 500);