SeouliteLab

jQuery의 callbacks.add() 메서드: 콜백 함수 추가하기 본문

카테고리 없음

jQuery의 callbacks.add() 메서드: 콜백 함수 추가하기

Seoulite Lab 2024. 3. 27. 11:01

jQuery의 callbacks 객체는 콜백 함수들을 관리하고 실행하는 데 사용됩니다. callbacks.add() 메서드는 이미 존재하는 콜백 리스트에 새로운 콜백 함수를 추가합니다. 이를 통해 코드의 유연성을 높이고 여러 콜백 함수를 관리할 수 있습니다.

예제 1: 콜백 함수 추가하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery callbacks.add() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 콜백 함수 추가하기 예제
  var callbacks = $.Callbacks();
  callbacks.add(function(value){
    console.log('첫 번째 콜백:', value);
  });
  callbacks.add(function(value){
    console.log('두 번째 콜백:', value);
  });
  callbacks.fire('데이터 전달');
});
</script>
</head>
<body>

</body>
</html>
<!-- 출력 결과 -->
<!-- 첫 번째 콜백: 데이터 전달 -->
<!-- 두 번째 콜백: 데이터 전달 -->

예제 2: 여러 번 콜백 추가하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery callbacks.add() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 여러 번 콜백 추가하기 예제
  var callbacks = $.Callbacks();
  callbacks.add(function(){
    console.log('첫 번째 콜백');
  });
  callbacks.add(function(){
    console.log('두 번째 콜백');
  });
  callbacks.add(function(){
    console.log('세 번째 콜백');
  });
  callbacks.fire();
});
</script>
</head>
<body>

</body>
</html>
<!-- 출력 결과 -->
<!-- 첫 번째 콜백 -->
<!-- 두 번째 콜백 -->
<!-- 세 번째 콜백 -->

예제 3: 콜백 함수에 인수 전달하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery callbacks.add() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 콜백 함수에 인수 전달하기 예제
  var callbacks = $.Callbacks();
  callbacks.add(function(value){
    console.log('콜백:', value);
  });
  callbacks.fire('인수 전달');
});
</script>
</head>
<body>

</body>
</html>
<!-- 출력 결과 -->
<!-- 콜백: 인수 전달 -->
저작자표시 비영리 변경금지