在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中給一個匿名函數提供多個參數

回答

相關問題