자바 스크립트 : 함수를 두 번 호출하면 원하지 않는 동작이 발생합니다.

Question

함수 쿨 다운 ()은 함수의 인수로 사용 된 비율을 사용하여 나눗셈을 생성합니다. 나중에 divison이 생성됩니다. 그것의 너비를 줄이기로했다 시간 (시간은 다시 인자입니다.) 또한 함수 cooldown()이 실행 중일 때 (또는 나눗셈의 너비가 0이 될 때까지) 요소 쿨 다운)은 (는) 호출되지 않습니다.

this fiddle which shows how it works을 볼 수 있습니다.

두 개의 다른 요소에 대해이 함수를 동시에 두 번 호출하면 문제가 발생합니다. See the fiddle. 첫 번째 빨간색 직사각형을 클릭하고 바로 다음 검정색을 클릭하면 둘 다 재사용 대기가 시작됩니다.하지만 첫 번째 작업이 끝나면 빨간색 직사각형 대신 검은 색 직사각형이 나타납니다. 빨간색은 보이지 않습니다. 모든 아이디어가 있습니까?

공지 사항 필수 기능 삭제() 숨어 요소에 대한 책임을 :

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