Tickerに一時停止機能をつけたい&リサイズでの挙動を制御したい

Question

こちらのサイトを参考にTickerを実装しました。

<section class="l-news">
	<h2><span>お知らせ</span></h2>
	<div class="js-ticker">
		<ul>
			<li><span class="c-date">2021.01.01</span>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</li>
			<li><span class="c-date">2021.02.02</span>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</li>
			<li><span class="c-date">2021.03.03</span>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</li>	
		</ul>
	</div>
</section>

.l-news {
	display: flex;
}
.js-ticker {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	width: 100%;
}
ul {
	line-height: 1.5;
	width: 100%;
	position: relative;
}
li {
	width: 100%;
	padding: .5rem;
}
//h2は省略しています

$(window).on( 'load resize', function() {
		var $setElm = $('.js-ticker');
		var effectSpeed = 1000;
		var switchDelay = 6000;
		var easing = 'swing';
		
		$setElm.each(function(){

			var $targetObj = $(this);
			var $targetUl = $targetObj.children('ul');
			var $targetLi = $targetObj.find('li');
			var $setList = $targetObj.find('li:first');
			var ulWidth = $targetUl.width();
			var listHeight = $targetLi.outerHeight();

			$targetObj.css({height:(listHeight)});
			$targetLi.css({top:'0',left:'0',position:'absolute'});
			var liCont = $targetLi.length;
			$setList.css({left:(ulWidth),display:'block',opacity:'0',zIndex:'98'}).stop().animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
			if(liCont > 1) {
				setInterval(function(){
					var $activeShow = $targetObj.find('.showlist');
					$activeShow.animate({left:(-(ulWidth)),opacity:'0'},effectSpeed,easing).next().css({left:(ulWidth),display:'block',opacity:'0',zIndex:'99'}).animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
				},switchDelay);
			}
		});
	});

一応問題なく動いたのですが、画面をリサイズすると、スクロールの表示が乱れ、おかしくなります。
またクライアントより動作の一時停止ボタンを入れてほしいと言われたのですが、こちらについては実装の仕方が全く想像がつきませんでした。
試しに以下のようにボタンを書いてフラグのオンオフをさせてみたのですが、止まりませんでした。

<section class="l-news">
	<h2><span>お知らせ</span></h2>
	<div class="js-ticker">
		<ul>
			<li><span class="c-date">2021.01.01</span>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</li>
			<li><span class="c-date">2021.02.02</span>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</li>
			<li><span class="c-date">2021.03.03</span>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</li>	
		</ul>
	</div>
	<button class="stop">一時停止</button>
</section>

$(window).on( 'load resize', function() {
	var $setElm = $('.js-ticker');
	var effectSpeed = 1000;
	var switchDelay = 6000;
	var easing = 'swing';

	var $ticker_flag = true,
		$tick_btn = $('.stop');
	$tick_btn.on('click', function () {
		if (!$ticker_flag) {
			$ticker_flag = true;
			$(this).addClass("btn_on");
		} else {
			$ticker_flag = false;
			$(this).removeClass("btn_on");
		}
	});

	$setElm.each(function(){

		var $targetObj = $(this);
		var $targetUl = $targetObj.children('ul');
		var $targetLi = $targetObj.find('li');
		var $setList = $targetObj.find('li:first');

		var ulWidth = $targetUl.width();
		var listHeight = $targetLi.outerHeight();
		$targetObj.css({height:(listHeight)});
		$targetLi.css({top:'0',left:'0',position:'absolute'});

		var liCont = $targetLi.length;

		$setList.css({left:(ulWidth),display:'block',opacity:'0',zIndex:'98'}).stop().animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
		if(liCont > 1) {

			if($ticker_flag) {
			setInterval(function(){
				var $activeShow = $targetObj.find('.showlist');
				$activeShow.animate({left:(-(ulWidth)),opacity:'0'},effectSpeed,easing).next().css({left:(ulWidth),display:'block',opacity:'0',zIndex:'99'}).animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
			},switchDelay);
			} else {
				return false;
			}
		}
	});
});

どなたか解決法がわかる方、教えていただけると幸いです。
お手数をおかけしますが、よろしくお願いいたします。

Answer 1

画面をリサイズすると、スクロールの表示が乱れ、おかしくなります

発生したイベントの数だけ setInterval が登録されるのが原因だと思います。
次の setInterval を追加する際に前のものをキャンセルすればいいかと思います。

window.clearInterval - Web API | MDN

---

以下のようにボタンを書いてフラグのオンオフをさせてみたのですが、止まりませんでした

フラグで管理をするのはいいと思います。
ご提示の書き方ですと、setInterval の外側が走るのは、'load resize'の時だけですので、有効になるのはその時だけです。
毎回走るのは、setInterval の内側です。

また、このボタンのクリックイベントも'load resize'の時のたびに登録されますから、前項と同じ問題があります。

Comments

[cofcof]

返信ありがとうございます。
ちょっと直してみました。
ぱっと見ちゃんと動いているように見えましたが、以下で考え方合っているでしょうか。

$(window).on( 'load', function() {
var $setElm = $('.js-ticker');
var effectSpeed = 1000;
var switchDelay = 5000;
var easing = 'swing';

var $ticker_flag = true,
$tick_btn = $('.stop');
$tick_btn.on( 'click', function() {
if(!$ticker_flag) {
$ticker_flag = true;
$(this).addClass("btn_on");
} else {
$ticker_flag = false;
$(this).removeClass("btn_on");
}
});

$setElm.each(function(){

var $targetObj = $(this);
var $targetUl = $targetObj.children('ul');
var $targetLi = $targetObj.find('li');
var $setList = $targetObj.find('li:first');

var ulWidth = $targetUl.width();
var listHeight = $targetLi.outerHeight();
$targetObj.css({height:(listHeight)});
$targetLi.css({top:'0',left:'0',position:'absolute'});

var liCont = $targetLi.length;

$setList.css({left:(ulWidth),display:'block',opacity:'0',zIndex:'98'}).stop().animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');

if(liCont > 1) {
setInterval(function(){
if($ticker_flag) {
clearInterval();
var $activeShow = $targetObj.find('.showlist');
$activeShow.animate({left:(-(ulWidth)),opacity:'0'},effectSpeed,easing).next().css({left:(ulWidth),display:'block',opacity:'0',zIndex:'99'}).animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
} else {
return false;
}
},switchDelay);
}
});
});

[Lhankor_Mhy]

resize については諦めた、ということでしたらこれでいいと思います。
なお、clearInterval() はこの書き方では全く意味がないので消していいです。

[cofcof]

resizeは書き漏れでした！
ですがリサイズしても表示が崩れていないのでこれで問題無さそうです。
ありがとうございました！