웹브라우저 디버깅 모드에서 함수 파라미터 값을 바꾸면 onclick이 왜 두 번 호출될까요?

Question

테스트 코드 클릭!! 브라우저 디버거 에서 Y값을 N으로 변경함flag : N 으로 함수가 한번만 호출 될 것으로 예상했지만,flag : Y, flag : N 두번 함수가 호출 됨크롬, 엣지 둘 다 동일함왜 그럴까요?

kenu,전독시 · Answer

웹 브라우저에서 onclick 이벤트 핸들러를 사용할 때, 디버깅 모드에서 함수의 인자값을 변경하면 예상치 못한 동작을 보일 수 있습니다. 이는 브라우저의 자바스크립트 엔진이 코드 실행 흐름을 재evaluating(재평가)하기 때문입니다. 즉, 디버거가 중단점에 도달하고 코드를 한 단계씩 실행하면서 변경된 변수의 값이 반영되어, 해당 코드 블록이 다시 실행됩니다.이 경우, onclick 이벤트 핸들러 내부에서 goChatRoom('Y')를 호출하려고 했지만, 디버거에서 flag 변수의 값을 'N'으로 변경했습니다. 이로 인해, 브라우저는 이벤트 핸들러 내부의 코드를 다시 평가하게 되고, 이전에 설정된 이벤트 핸들러(goChatRoom('Y'))와 새로운 이벤트 핸들러(goChatRoom('N'))가 모두 호출되어, 총 두 번의 함수 호출이 발생합니다.이 문제를 해결하려면, 디버깅 세션을 종료하고 페이지를 새로 고침하여 원래의 상태로 복원해야 합니다. 이렇게 하면, 이벤트 핸들러는 처음 설정된대로 작동하며, 변경된 변수 값은 적용되지 않습니다.또 다른 방법으로, 개발자 도구의 "Sources" 탭에서 해당 스크립트 파일을 찾아, 디버그 세션 중인 코드 라인을 직접 수정하여 원하는 값을 설정할 수도 있습니다. 하지만 이 방법도 디버깅 과정에서 발생하는 부작용을 완전히 제거하지는 못할 수 있으므로 주의가 필요합니다.from: https://www.phind.com/search?cache=esdl5t1t6fp5x07fz72om9l2

웹브라우저 디버깅 모드에서 함수 파라미터 값을 바꾸면 onclick이 왜 두 번 호출될까요?

1개의 답변

Q&A 목록