2012-10-10 5 views
0

나는 캔버스에 클릭 이벤트에서 표시되어야하는 일부 이미지를 표시하려고합니다. 그리고 모든 것은 괜찮은 것처럼 보이지만, 오랫동안 수정할 수없는 버그를 발견했습니다. 버그는 첫 번째 페이지 오프닝 램프 이미지에 표시되지 않습니다. 다음 단계에 따라 재현 할 수 있습니다.캔버스에 추가하는 이미지의 이상한 동작

  1. 열기 link;
  2. 클릭하여 이미지 < - 깨끗한 사각형이 표시됩니다.
  3. 다시 클릭하십시오. < - 사각형이 사라집니다.
  4. 다시 클릭하십시오. < - 이미지가있는 사각형이 표시됩니다.

이미지가 처음으로 표시되는 이유는 무엇입니까?

답변

2

적어도 하나의 (매우 일반적인) 오류가 코드에 있습니다. 메서드 .onload에는 함수 참조가 할당 될 것으로 예상됩니다. 즉치 함수 호출 processButtonImages(i, delta, buttons[i], object)의 결과 (반환 값)에 할당하고 있습니다. 따라서이 함수 호출에서 함수 참조를 반환하지 않는 한이 함수 호출은 예상대로 작동하지 않습니다.

+0

흠, 실제로 나는 의미를 포착하지 않았습니다. 따라서, 참조를 반환하려면 어떻게해야합니까? 이렇게해야할까요?'processButtonImages' 함수의 끝에'return processButtonImages;'? – rdo

+0

실제로이 시점에서 의미를 다시 고려해야합니다. 일반적으로 이것을 할 수있는 'buttons [i] .onload = function() {processButtonImages (i, delta, buttons [i], object)};'하지만 이것을 루프에 할당하면 동기화 문제가 발생합니다. 폐쇄로 인해). 루프를 "느슨하게"하거나 루프 인덱스를 처리하기 위해 다른 (내부) 클로저를 생성해야합니다. – devnull69

+0

예,이 코드 부분에 문제가있었습니다. 그리고 몇 가지 추가 디버그 후 그것을 해결합니다. 감사! – rdo

0

image onload 이벤트에서 일부를 호출하고 설정하고 있습니다. 그래서, 처음에는 모든 것을 정확하게 실행하지 않습니다. 이 jsfiddle를 확인하십시오. 끝에 코드를 편집했습니다. http://jsfiddle.net/sKymY/14/