여러 Flicking중 플리킹영역은 없는데 windows.resize이벤트에는 resize 이벤트가 남아 있어 flicking.resize 이벤트 가발생할때

[changdongchun]

Description

egHelperV3_wel.js?v=20200921c:151 Uncaught TypeError: djFlick.resize is not a function
at egHelperV3_wel.js?v=20200921c:151
at dispatch (jquery-3.5.1.min.js?v=20200910:2)
at v.handle (jquery-3.5.1.min.js?v=20200910:2)
at Object.trigger (jquery-3.5.1.min.js?v=20200910:2)
at Object.a.event.trigger (jquery-migrate-1.4.1.min.js?v=20200910:2)
at jquery-3.5.1.min.js?v=20200910:2
at Function.each (jquery-3.5.1.min.js?v=20200910:2)
at a.fn.init.each (jquery-3.5.1.min.js?v=20200910:2)
at a.fn.init.trigger (jquery-3.5.1.min.js?v=20200910:2)
at loadingHide (common.js?v=20200920:400)

에러현상을 보니 3판 구조 플리킹내 여러 프리킹 요소들이 생성되고 지워지면서 eventlistener에는 남아 있어서 그런지 없어진 판
에서 resize이벤트를 발생시켜 에러가 나고 있어서요

첨부한 파일 처럼
$(window).bind('orientationchange resize', function(event){

if ( $(settings.contain).length > 0)
{
	console.log("START resize EVE");
	console.log("djFlick " + djFlick );
	djFlick.resize();
	fireResizeEvent();
	console.log("END resize EVE");
}

});

이렇게 해서 해당 영역이 있으면 resize를 하라고 했는데도 djFlick.resize(); 이 부분이 실행이 되는 것 같습니다.

3판 구조 플리킹 쪽을 만질 수가 없어 우선 이부분 에러나기전에 destory라도 시켜보고 싶은데

혹시 방법이 없을까요?

egHelperV3_wel.txt

Steps to check or reproduce

[WoodNeck]

안녕하세요.
Flicking의 경우 destroy시에 인스턴스의 메소드를 전부 삭제하는 코드가 있습니다.

• https://github.com/naver/egjs-flicking/blob/master/src/Flicking.ts#L483

이는 메이저 2버젼때도 동일하게 있던 동작이므로 v2, v3관계없이 동일하게 처리해주시면 됩니다.
위 코드에서 resize를 수행 전에 resize 메소드가 존재하는지 체크해주시면 될 것 같습니다.

djFlick.resize && djFlick.resize();

[changdongchun]

if (typeof(djFlick.resize) != undefinded )
{
djFlick.resize();
}

이렇게 해야 한다는건가요?
djFlick.resize && djFlick.resize();
이거의 쓰임을 어떻게 해야 할지...

[changdongchun]

window.resize이벤트가 발생할때 화면에 없는 컨텐츠에 event listener가 달려있어 호출 하는 부분을 없애고자 할때.
resize메소드가 존재하는지 체크해서 없으면 destory가 가능한가요?

flicking.pkgd.min.js?v=20200921z:34 Uncaught TypeError: Cannot read property 'getIndex' of undefined
at u.r.clonePanels (flicking.pkgd.min.js?v=20200921z:34)
at u.r.updateClonePanels (flicking.pkgd.min.js?v=20200921z:34)
at u.r.resize (flicking.pkgd.min.js?v=20200921z:34)
at f.resize (flicking.pkgd.min.js?v=20200921z:34)

resize는 탓는데 getIndex에서 에러나는 (화면에 없어서 그런지... _부분이니까 destory도 가능한 부분일까요?

[changdongchun]

$(window).bind('orientationchange resize', function(event){
setTimeout(function(){
if ( ($(settings.contain).length > 0) && ( djFlick.wrapper != null ) )
{
try
{
djFlick.getIndex();
console.log("START resize EVE");
console.log("djFlick " + djFlick );
djFlick.resize();
console.log("END resize EVE");
}
catch (e)
{
djFlick.destroy();
}
}
}, 101);

});

오류나는 것에 아이디어를 얻어서 try catch으로 에러일때 지우고자 하는데

[WoodNeck]

제 생각엔 이 부분은 현재 destroy하는 부분의 코드를 확인해야 해결 가능할 것 같아 보이네요.
기본적으로 v3의 경우 destroy시에 window.resize이벤트 리스너를 remove하는 코드가 존재합니다.

• https://github.com/naver/egjs-flicking/blob/master/src/Flicking.ts#L477

만약 destroy된 Flicking이 window의 resize이벤트를 받지 않기를 원하신다면 위와 같이 리스너를 제거해주시면 되는데요,
지금 사용하고 계시는 destroy 코드를 보여주실 수 있을까요?

[WoodNeck]

코드 첨부하실땐 (```)로 묶어서 보기 편하게 해주시면 감사하겠습니다^^
```js
const a = 1;
```

위와 같이 입력시 다음과 같이 변합니다.

const a = 1;

[changdongchun]

아 급한 마음에 죄송합니다.

우선 처리 결과 공유하면

Flicking 함수를 egHelperV3_wel.js를 묶어서 게이트웨이처럼 쓰고 있었는데요

이중 autoResize옵션 true로 했더니 자체내 이벤트 리스너에 이벤트가 우선 걸려있어서

우선 구조를 바꾸긴 힘든 상황이라

autoResize를 false로 하고

자체 windows.resize 이벤트내에서 try catch로 감싸주니 우선 영역이 없어서 나는 오류 getIndex

flicking.pkgd.min.js?v=20200921z:34 Uncaught TypeError: Cannot read property 'getIndex' of undefined
at u.r.clonePanels (flicking.pkgd.min.js?v=20200921z:34)
at u.r.updateClonePanels (flicking.pkgd.min.js?v=20200921z:34)
at u.r.resize (flicking.pkgd.min.js?v=20200921z:34)
at f.resize (flicking.pkgd.min.js?v=20200921z:34)

이 부분이 더이상 발생하지 않음을 확인하였습니다.

$(window).bind('orientationchange resize', function(event){
	setTimeout(function(){
		if ( ($(settings.contain).length > 0) && ( djFlick.wrapper != null ) )
		{
			try
			{
				var chkError = djFlick.getIndex();
				djFlick.resize();
			}
			catch (e)
			{
				djFlick.destroy();
			}
		}
	}, 64);
});

autoresize 옵션을 false로 하고 위와 같이 window 이벤트 회전과 리자이스를 바인딩하여 위와같이 처리를 우선 하였습니다.

$(window).bind('orientationchange resize', function(event){
	setTimeout(function(){
		djFlick.resize();
	}, 64);
});

위와 같이도 수정해보았는데 위와같이 하면 이전과 동일한 getIndex오류가 나오고 있어 우선 try catch로 묶었습니다.

[WoodNeck]

플리킹을 변형해서 사용중이신 케이스이실 경우, 말씀하신대로 autoResize를 false로 하신 뒤 직접 resize를 핸들링하셔도 좋을 것 같습니다.
다만 위에 적은것처럼, destroy시에 resize이벤트 리스너를 제거하시지 않으면 에러의 근본적인 원인은 해결 불가능할 것 같네요.

[changdongchun]

djFlick.destroy()는 egFlicking내 destory를 호출 하게 해놓았는데요.

var djFlick = new eg.Flicking( 라서 eg.Flicking내 destroy를 호출하게 한것 인데 이 부분도 먼가 수정이 필요할까요?

[WoodNeck]

Flicking의 destroy를 호출하고 계시다면, resize 이벤트에 대한 리스너가 destroy시점에 자동으로 remove될텐데요.
현재 플리킹을 커스터마이징해서 사용하고 계셔서, 정확한 코드를 보지 않는 이상 원인을 파악하긴 어려울 것 같습니다.

정확하게 어떤 이슈인지 잘 모르겠는데요,
제가 이해하기로는 해당 이슈가 이미 destroy된 플리킹에 대해 getIndex나 resize가 없어서 오류가 발생하고 있는 케이스로 보입니다.
인스턴스에 해당 메소드가 없다는 것 자체가 이미 destroy가 이뤄진 것으로 보이네요.
때문에, try-catch 구문에서 추가로 destroy하실 경우 이미 destroy되었기에 크게 의미없을 것 같은데요.

제 생각엔 저 이전에 인스턴스를 destroy하는 부분에 원인이 있을 것 같습니다. 그 부분의 코드를 확인해봐야 알 것 같네요.

[changdongchun]

항상 빠른 답변 감사합니다.

[WoodNeck]

넵^^ 해결되셨다면 이슈는 닫도록 하겠습니다.
필요시 언제든지 다시 열어주세요.