Question

函数 cooldown（）应该具有非常类似的效果。在调用时，它应该创建除以用作函数参数的元素的比例。然后，创建的divison应该减少它在时间的宽度（时间再次是参数）。还需要提到的是，当函数cooldown（）正在运行时（或者在分割时＃） 39; s宽度减小到0），调用元素冷却（）是不可见的。

您可能希望看到this fiddle which shows how it works。

我的问题来了，当我们同时在两个不同的元素上调用此函数两次时。See the fiddle。当我们点击第一个红色矩形然后再点击黑色时，两个冷却时间都开始。但是当第一个完成时，而不是出现红色矩形，黑色矩形出现。红色保持不可见。任何想法？

注意隐藏元素的基本功能 erase（）：

function erase(id,delay)
{

 document.getElementById(id).style.opacity = 0;

 setTimeout(function exec()
 {

  document.getElementById(id).style.visibility = "hidden";
 },delay);
}

并且功能冷却（）：

   function cooldown(id,time)
   {
    el = document.getElementById(id);
    parent = document.getElementById(id).parentNode;

    erase(el.id,500);

     cdshadow = document.createElement("div"); 

     cdshadow.className = "movefalse";
     cdshadow.style.backgroundColor = "black";
     cdshadow.style.transition = "width "+time/1000+"s";
     cdshadow.style.opacity = 0.7;
     cdshadow.style.transitionTimingFunction = "linear";
     cdshadow.style.borderRadius = 5 +"px";
     cdshadow.style.position = "absolute";
     cdshadow.style.width = el.offsetWidth +"px";
     cdshadow.style.height = el.offsetHeight +"px";
     cdshadow.style.left = el.offsetLeft +"px";
     cdshadow.style.top = el.offsetTop +"px";

     parent.appendChild(cdshadow);

    setTimeout(function shorten(){cdshadow.style.width = 0;},1);

    setTimeout(function show_back()
    {
     el.style.visibility = "visible";
     el.style.opacity = 1;

    },time);

  return time;
 }

Answer 1

那是因为你的变量是全局的。定义像波纹管一样的变量。

因此divs.混合使用var.

使其成为本地函数

var el = document.getElementById(id);
var parent = document.getElementById(id).parentNode;

var cdshadow = document.createElement("div");

DEMO

Javascript：调用函数两次会导致不必要的行为

1 个答案: