$(window).on("scroll resize", function(){..}); & 콜백함수

1. 콜백함수(callback)

• 나중에 호출되는 함수.
•  특정 이벤트 발생시, 혹은 특정 시점에 도달했을 시에 시스템에서 호출하는 함수이다.

/*jquery*/

$(document).on('click', 'a[href="#"]', function(e){
    e.preventDefault();
});

위 코드는 문서에서 href 속성값이 #인 a태그를 클릭'할 때마다' 다음과 같은 함수를 호출하겠다는 의미이다. 이 경우 function은 콜백함수가 된다.

 

//Javascript
window.addEventListener('resize', function(){
	console.log('resize event!');
    if (window.innerWidth <= 800) {
      alert('현재 브라우저 크기가 <= 800px');
    }
});
 
 
//jQuery
$(window).on('resize', function(){
	console.log('resize event!');
    if (window.innerWidth <= 800) {
      alert('현재 브라우저 크기가 <= 800px');
    }
});

 

2. fixGallery 실습

 

1) script 오류

 

스크롤 내릴시 감춰졌던 텍스트가 나타나고, 텍스트가 고정된 채로 갤러리가 움직이는 형태

 

$(function(){
    var scrollNum = $(document).scrollTop();
  alert(scrollNum);
    
    if(scrollNum > 300){
        $(".gallery .inner .bottomBox .left p.img").addClass('on');
    }
    
 });

처음에 이런식으로 짰는데 작동이 안돼서 당황스러웠다. scrollNum 변수에 scrollTop()으로 스크롤을 내렸을시 수직위치를 할당시키고, 스크롤 위치가 300을 넘어가면 text에 on 클래스를 붙여 opacity:0 을 1로 만들어 주는 코드.

 

2) 문제점

$function만 입력하는 것이 아니라 $(window).on("scroll resize",function 코드를 추가해야 한다. 내가 짠 코드 경우는 윈도우 창을 스크롤하여 사이즈를 다시 조정할 때 콜백함수를 호출한다'는 식이 없었기 때문에 오류가 발생함.

$(window).on("scroll resize", function(){
    var scrollNum= 0;
    scrollNum = $(document).scrollTop();
    // alert(scrollNum);

    if(scrollNum > 300){
        $(".gallery .inner .bottomBox .left p.img").addClass('on');
        }
    else{
        $(".gallery .inner .bottomBox .left p.img").removeClass('on');
    }
    if(scrollNum >3347){
        $(".gallery .inner .bottomBox .left p.img").removeClass('on');
        }
    

});

이렇게 고쳐주면 제대로 실행된다.

 

 

Javascript - 콜백함수(Callback function)이란?

<참고>

https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/