javascript - 在 setInterval 中为匿名函数提供多个参数

Question

我不确定以前是否有人问过这个 Javascript 问题 - 我找不到它，但如果我错过了，我深表歉意。

我正在尝试创建一个带有复选框的页面，这些复选框将淡入/淡出相应的图像。淡出会持续1秒，每100ms，图像的不透明度增加或减少0.1；当不透明度达到 0 或 1 时，setInterval 调用将停止。但是，我不确定如何将参数传递给匿名函数调用。我试图传递两个变量 - 第一个是图像的 ID，从复选框值获得，另一个是复选框是否被选中，以便函数知道是淡入还是淡出。

但是，我按原样(见下文)遇到了代码问题，我认为这是由于 setInterval 函数调用中变量的范围所致——这就是为什么我要询问将多个参数传递到调用中的原因.

例如:

<form action="">
<input type="checkbox" onclick='handleClick(this);' name="skymap" value="aurora">Aurora
<input type="checkbox" onclick='handleClick(this);' name="skymap" value="mainindex">Main Index
</form>

而函数如下(到目前为止)

function handleClick(cb) 
{

var myInterval = setInterval(function () 
{
  if (cb.checked) // tick box checked - fade in.
  {
    document.getElementById( cb.value ).style.opacity+=0.1;  // I'll refactor all these style.opacity calls later on :)

    if( document.getElementById( cb.value ).style.opacity>1 ) // full opacity - stop the timer
    {
        document.getElementById( cb.value ).style.opacity = 1;
        clearInterval(myInterval);
    }
}
else // fade out
{
    document.getElementById( cb.val ).style.opacity-=0.1;

    if( document.getElementById( cb.val ).style.opacity<0 )
    {
        document.getElementById( cb.val ).style.opacity = 0;
        clearInterval(myInterval);
    }
}


}, 100);


}

图像的名称如下:

<img id="aurora" src="aurora.png" />

Answer 1

你在那里遇到了一个棘手的问题。

首先，你在else部分写了“cb.val”而不是“cb.value”

其次，对象“cb”的不透明度属性是字符串类型。 -= 操作将不透明度值转换为数字，因为您不能对字符串执行减号操作。相反，+= 操作将数字 (0.1) 转换为字符串并添加到不透明度字符串的末尾(例如，如果不透明度为 0.1，则结果将为“0.10.1”)。由于此值无效，它将被设置为最后一个有效值，您将陷入循环

这是一个工作示例:

function handleClick(cb) 
{

var myInterval = setInterval(function () 
{
  if (cb.checked) // tick box checked - fade in.
  {
    document.getElementById( cb.value ).style.opacity = parseFloat(document.getElementById( cb.value ).style.opacity) + 0.1  // I'll refactor all these style.opacity calls later on :)

    if( document.getElementById( cb.value ).style.opacity>1 ) // full opacity - stop the timer
    {
        document.getElementById( cb.value ).style.opacity = 1;
        clearInterval(myInterval);
    }
}
else // fade out
{
    document.getElementById( cb.value ).style.opacity-=0.1;

    if( document.getElementById( cb.value ).style.opacity<0 )
    {
        document.getElementById( cb.value ).style.opacity = 0;
        clearInterval(myInterval);
    }
}


}, 100);


}

您可能遇到的另一个问题是，opa​​city 属性不是默认设置的(或者至少您不能确定)。所以第一次，opacity = "", 空字符串。这将导致您的动画跳跃。如果检测到空字符串，请务必初始化不透明度。