제대로

Question

내가 마우스 오버에 발사하도록되어이 코드가하고 onmouseout에 반대 할 상대입니다 :

colinc(); 

function colinc(){ 

    var hexnum=number.toString(16); 
    var hexcolor="#"+hexnum+hexnum+hexnum; 
    document.getElementById("c"+x).style.backgroundColor=hexcolor; 
    number=number+8; 
    if(number<=184) 
     setTimeout(colinc,50); 
} 

카운터 부분은 수 = 수-8의 변화가; 및 번호> = 40; 문제는 마우스 오버시 색상 변경 및 마우스 아웃 사용시 불이 들어와야하는 여러 상자가 있다는 것입니다. 내가 상자에서 천천히 움직일 때 모든 것은 괜찮습니다. 그러나 빨리 움직이면 어떤 상자는 켜지지 않습니다 ... 나는 매우 빠르게 지나가면 onmouseout이 일어나지 않는 것처럼 보입니다. 도움이 되었습니까? 또한

function MouseOverHandler(event) { 
    console.log('mouseover'); 
} 

function MouseOutHandler(event) { 
    console.log('mouseout'); 
} 

당신이 이제까지의 실행을 중지 않습니다

function flash(x){ 
number=0; 
var cc = document.getElementById("c"+x); 
var cs=document.defaultView.getComputedStyle(cc,null); 
var bg=cs.getPropertyValue('background-color'); 
var str=""+bg; 
var n=str.replace("rgb",""); 
    n=n.replace("(",""); 
    n=n.replace(")",""); 
var arr=n.split(","); 
number=parseInt(arr[0]); 

colinc(); 

function colinc(){ 

    var hexnum=number.toString(16); 
    var hexcolor="#"+hexnum+hexnum+hexnum; 
    document.getElementById("c"+x).style.backgroundColor=hexcolor; 
    number=number+8; 
    if(number<=184) 
     setTimeout(colinc,50); 
} 
} 

function flashe(x){ 
number=0; 
var cc = document.getElementById("c"+x); 
var cs=document.defaultView.getComputedStyle(cc,null); 
var bg=cs.getPropertyValue('background-color'); 
var str=""+bg; 
var n=str.replace("rgb",""); 
    n=n.replace("(",""); 
    n=n.replace(")",""); 
var arr=n.split(","); 
number=parseInt(arr[0]); 

colinc(); 

function colinc(){ 

    var hexnum=number.toString(16); 
    var hexcolor="#"+hexnum+hexnum+hexnum; 
    document.getElementById("c"+x).style.backgroundColor=hexcolor; 
    number=number-8; 
    if(number>=40) 
     setTimeout(colinc,40); 
} 

}

이 제대로 콘솔에서 그들을 로그인하여

Answer 1

확인 이벤트 화재 여부를 내 전체 JS 코드 반대의 이벤트가 발생하면 핸들러에서 처리합니다. 이 작업은 타임 아웃 ID를 가져 와서 취소 할 때 수행됩니다. 코드에서

var mouseOverTimeout, mouseOutTimeout; 

function colinc(){ 
    clearTimeout(mouseOutTimeout); 
    mouseOverTimeout = setTimeout(colinc,50); 
} 

function MouseOutHandler(event) { 
    clearTimeout(mouseOverTimeout); 
    mouseOutTimeout = setTimeout(MouseOutHandler,50); 
} 

Answer 2

:

> function colinc(){ 
> 
>  var hexnum=number.toString(16); 

식별자 수 선언하거나 초기화, 당신은 참조 오류를 얻을 수 있도록하고 스크립트가 실패 할 수 없습니다.

var number = 0; 

또는 수 다른 값을 제공 : 위의 라인을하기 전에, 당신은 아마 추가해야합니다. 당신이 폐쇄에 대한 참조를 유지하거나 수 글로벌 할 수 있도록

>  var hexcolor="#"+hexnum+hexnum+hexnum; 
>  document.getElementById("c"+x).style.backgroundColor=hexcolor; 
>  number=number+8; 
>  if(number<=184) 
>   setTimeout(colinc,50); 

그러나 여기에서 당신은 글로벌 수에 액세스해야합니다. 만약 당신이 그렇게하려고한다면, * colnic_counter * 나 다른 세계와 충돌 할 것 같지 않은 더 나은 이름을 주어야합니다. 같은

> } 

뭔가 : 함수 표현식 함수를 초기화하는 데 사용되기 때문에, 당신은 이후에 호출해야한다는

var colinc = (function() { 
    var num = 0; 
    return function() { 
     var hexnum = num.toString(16); 
     var hexcolor = "#" + hexnum + hexnum + hexnum; 
//  document.getElementById("c"+x).style.backgroundColor=hexcolor; 
     console.log(hexcolor); 
     num += 8; 

     if (num <= 184) 
      setTimeout(colinc,50); 
    } 
}()); 

colinc(); 

참고.

Answer 3

나는 cleartimeout의 문제를 해결했다. 난 그들의 ID에 따라 모든 상자의 현재 mouseover 및 mouseout setTimeout ID를 보유하기 위해 두 개의 배열을 만들었습니다. mouseout이 호출 될 때마다 먼저 배열에서 대응하는 mouseover를 지우고 mouseout에 대해서도 동일하게합니다.