JS30-Slide in on Scroll

JS30 의 slide in on scroll을 진행하던준 알게된점을 정리해두려 합니다. 

1.Debounce 함수

Debounce 함수는 JS에서 기본으로 지원하는 함수는 아니고 여러 라이브러리에서 지원하는 함수라고 한다. Debounce 함수의 기능은 입력이 단시간에 여러번 들어오더라도 한번만 입력되게 하는 것이다. 

처음 해당함수를 보고 이해가 안가는 점이 너무 많았다 ㅜㅜ

function debounce(func, timeout = 300){
    let timer
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => { func.apply(this, args) }, timeout);
    };
  }
  
  function saveInput(){
    console.log('Saving data');
  }
  
  const processChange = debounce(() => saveInput());

  window.addEventListener('keyup', processChange)

debounce 함수를 보면 timer 변수만 만들고 익명함수를 리턴해준다. 인터넷에 찾아보니 이렇게 하는 것이 클로저라는 것이라는 거라는데... 그래서 poiemaWeb에서 클로저와 실행 컨텍스트에 관한 글을 찾아보게 되었고 처음으로 클로저에 대한 이해가 어느정도 되는 것 같다. 

https://poiemaweb.com/js-execution-context

Execution Context | PoiemaWeb

https://poiemaweb.com/js-closure

Closure | PoiemaWeb

(마침 코어 자바스크립트 책의 2장을 읽고 있었는데 마침 그부분이 실행컨텍스트를 설명하던부분이라 이해하기 딱 좋게 맞물렸다!)

클로저는 내부함수를 외부함수밖에서 쓰더라도 내부함수가 선언된 당시의 렉시컬 환경을 기억하고 있어서 외부함수의 렉시컬 요소(변수 같은것?)에 접근 할 수 있다는 것이고

간단하게 말하자면 debounce에서 let timer로 선언한 변수를 return하는 익명함수가 기억하고있어서 debounce가 실행컨텍스트에서 사라져도 리턴한 익명함수에서 timer 변수를 계속해서 사용할 수 있다는 것이다. 

아직이해하지 못한것은 func.apply(this, args)를 왜 별도로 하는지 잘 이해가 안간다. 

apply 함수가 함수를 특정 this 환경에서 실행시키기 위해 쓴다는 것은 MDN 공식문서를 보긴했는데 사실 크롬 콘솔창에서 apply(this, args) 부분없이 그냥 func만 놔둬도 정상적으로 실행이 된다.....

2. 웹사이트에서 스크롤 좌표 찾기

window.scrollY // 스크롤 시점의 맨위 화면 부터 얼마나 떨어졌는지 알려준다. 

window.innerHeight //현재 화면의 높이를 구해올수 있다. 

element.offsetTop // Ancestor로 부터 얼마나 떨어졌는지 구해올 수 있다. (정확히는 offsetparent)