자바 스크립트 여러 스크립트 window.load

Question

를 사용하여 전화 나 html로 웹 페이지의 머리에 다음과 같은 코드가 있습니다

파일에

<script type="text/javascript" src="Image-Slider.js"></script> 
<script type="text/javascript" src="Image-Slider2.js"></script> 

"이미지-Slider.js"나는 코드를 다음 창 무리가 있습니다. onload = function1; 하단에.

Image-Slider2.js는 다른 파일에서 똑같은 코드입니다. 유일한 차이점은 ID가 참조하는 HTML 페이지에있는 것입니다.

두 번째 스크립트 (Image-Slider2)가 작동하지 않는 첫 번째 스크립트가 올바르게 작동합니다.

웹 페이지가 열릴 때마다 두 스크립트를 모두 실행하려면 어떻게해야합니까?

Answer 1

당신은 onload = 여러 이벤트 핸들러를 할당 할 수 없습니다 - 두 번째 시간을 할당하는 x에서 x = 3; x = 6 결과 6되는 것과 같은 이유로 이전을 덮어 씁니다.

대신 .addEventListener()를 사용할 수 있습니다

// in one of your JS files: 
window.addEventListener('load', function1) 

// in the next JS file: 
window.addEventListener('load', function2) 

은 "이미지-Slider2.js 다른 파일에 동일한 코드의 유일한 차이 존재하는 아이디의가에 참조하는 HTML 페이지에.. "

그래서 그들은 완전히 다른 점을 제외하고는 똑같습니다.

코드에서 전역 변수를 사용하는 경우 동일한 변수를 사용하려고 서로의 발가락을 밟을 것이므로 두 파일로 반복하여 사용하면 효과가 없습니다. 당신은 아마 잘못하고있다

// wrapper function 
(function() { 

    var anyVariableHere; 
    function anyFunction() { } 

    window.addEventListener("load", anyFunction); 

})(); // run the wrapper function immediately 

Answer 2

: 당신은 같은 기능의 각 파일에 모든 코드을 을 캡슐화하여, 예를 들어, 하지 사용 글로벌 변수 나 전역 함수에 코드를 구조화하여 해당 문제를 해결할 수 있습니다 . Image-Slider은 라이브러리처럼 들립니다. 한 번만 포함시킨 다음 다른 스크립트 파일을 사용하여 이미지 슬라이더를 초기화하면됩니다. 사용하는 라이브러리에 대한 자세한 정보를 제공하면보다 자세한 도움을받을 수 있습니다.