在setInterval中给一个匿名函数提供多个参数

我不确定这个Javascript问题是否曾经被问过 - 我找不到它，但是如果我错过了它，我的道歉。在setInterval中给一个匿名函数提供多个参数

我正在尝试创建一个带有淡入/淡出相应图像的复选框的页面。衰落需要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" />

来源

2016-02-22 EventHorizon

我现在没有看到任何参数正在通过？ – colecmc

这就是问题 - 我不知道该怎么做... – EventHorizon

您正在运行到一个比较棘手的问题出现。

首先，你写了“cb.val”而不是“cb。值“在其他部分

其次，对象”cb“的opacity属性是字符串类型。 - =操作将不透明度值转换为数字，因为您无法对字符串执行减号操作。 + =操作，将数字（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); 


}

，你可能会遇到一个问题，不透明度适当ty没有默认设置（或者至少你不能确定）。所以第一次，opacity =“”，空字符串。这会导致你的动画跳转。如果您检测到空字符串，请务必初始化不透明度。

来源

2016-02-22 22:35:41

谢谢，这正是我需要的！ cb.val和缺乏初始不透明度只是由于我的草率复制和粘贴，但它完美的作品，非常感谢！ – EventHorizon

您可以使用可选setInterval(function(arg1, arg2, ..){...}, intervalTime, arg1, arg2,...)功能参数

function handleClick(cb) 
{ 

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

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

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

}

来源

2016-02-22 21:52:21

你可以在你现有的代码中使用cb.checked，但是要回答你的问题：使用setInterval和setTimeout，你只需使用闭包功能来传入变量，因为来自外部作用域的值）在评估时可供您使用。一个非常简单的水平，你可以这样做：

function myTimeoutClosure(greeting, subject) { 
    return function() { 
     console.log(greeting + " " + subject); 
    }; 
} 
// ... 
setTimeout(myTimeoutClosure("Hello", "World"), 500);

来源

2016-02-22 21:52:50

下面是它工作的例子，你是领导的方式是将潜在地与人反复点击复选框的一些问题，并堆放了一堆彼此之间的间隔。在这种情况下，您有一个函数会自动调用超时并逐步完成转换，而不是直接依赖间隔。

function fadeElement(elem, increment) { 
 

 
    elem.style.opacity = parseFloat(elem.style.opacity) + increment; 
 

 
    if (elem.style.opacity >= 1) { 
 
    elem.style.opacity = 1 
 
    } else if (elem.style.opacity <= 0) { 
 
    elem.style.opacity = 0 
 
    } else { 
 
    clearTimeout(elem.getAttribute('data-timeout')) 
 
    elem.setAttribute('data-timeout', setTimeout(function() { 
 
     fadeElement(elem, increment) 
 
    }, 100)) 
 
    } 
 
} 
 

 
function handleClick(cb) { 
 

 
    var chkbox = document.getElementById(cb.value); 
 
    var direction = cb.checked ? 0.1 : -0.1; 
 

 
    fadeElement(chkbox, direction) 
 

 

 
}

<form action=""> 
 
    <input type="checkbox" checked onclick='handleClick(this);' name="skymap" value="aurora">Aurora 
 
    <input type="checkbox" checked onclick='handleClick(this);' name="skymap" value="mainindex">Main Index 
 
</form> 
 
<p id="aurora" style="opacity:1">Aurora</p> 
 
<p id="mainindex" style="opacity:1">Main Index</p>

来源

2016-02-22 22:18:59 jmcgriz

这里的例子。我希望这是你正在寻找的东西。请让我知道。

<form action=""> 
<input type="checkbox" class='imageSelect' name="skymap" value="aurora">Aurora 
<input type="checkbox" class= 'imageSelect' name="skymap" value="mainindex">Main Index 
</form> 
<div id="aurora" style="background:yellow; width:150px; height:40px; float:left; display:none;">Aurora Image </div> 
<div id="mainindex" style="background:blue; width:150px; height:40px;float:left; display:none;">MainIndex Image </div>

的JS：

function CheckBoxClick(){ 
    $(".imageSelect").click(function(){ 
     /*if(this.checked){ 
      $("#"+$(this).val()+" ").fadeIn(); 
      }else{ 
      $("#"+$(this).val()+" ").fadeOut(); 
      }*/ 
    $("#"+$(this).val()+" ").toggle(this.checked) 
    }); 
};

褪色效应看起来更好，但如果你使用与否，都工作它是你的电话。下面的代码一起玩：https://jsfiddle.net/dzgppqap/

PD：记住添加事件当页面已准备就绪：

$(document).ready(CheckBoxClick());

来源

2016-02-22 22:20:23 epinal

在setInterval中给一个匿名函数提供多个参数

回答

相关问题