collapsing event 만들기

bootstrap UI중 collapse라는 것이 있다.

본 collapse에 자세한 사항에 대해서는 아래의 링크를 참고바란다.

https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

이러한 collapse는 여러가지 이벤트 감지함수 및 발생함수를 제공한다.

그 함수는 아래의 링크에 정리되어 있다.

https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

하나 아쉬운 것은 collapse가 시작할때와 종료할때 이벤트는 있지만,

진행중일때 이벤트는 없다는 점이다.

(최근 collapse가 진행중일때의 이벤트를 감지해야만 하는 상황이 생겼다.)

그래서 내가 직접 collapse가 진행될때 그 이벤트를 감지할 수 있는 방법을 고안해보았다.

결론적으로 setInterval() 및 clearInterval() 함수들을 쓰면 쉽게 만들수 있다.

예제는 아래와 같다.

var collapsingCheck = null;

$(document).on('show.bs.collapse', function() {

  collapsingCheck = setInterval(function() {

    console.log('collapsing');

  }, 10);

})

$(document).on('shown.bs.collapse', function() {

  clearInterval(collapsingCheck);

  collapsingCheck = null;

})

이렇게 되면 collapse가 시작되서 끝날때까지의 이벤트를 감지할 수 있게 된다.