Почему таймер запускается лишь один раз?

Question

Имеется следующий код:

(function(){
	var doc = document;
	/*doc.onselectstart = function(){

	};*/
	doc.onselectionchange = function () {
		let {anchorNode, anchorOffset, focusNode, focusOffset} = document.getSelection();
		var btn = doc.getElementById("check");
		var	bo = btn.style.opacity;
		console.log(bo);
		var timer;
		var AtoB = function () {
      console.log("AtoB");
			if (bo < 1.0) {
				bo += .05;
				if (bo > 1.0) 
					bo = 1.0;
				btn.style.opacity = String(bo);
			}
			if (bo == 1.0)
				clearInterval(timer);	
		};
		//console.log(anchorNode, anchorOffset, focusNode, focusOffset);
		var tree = [];
		var parent = anchorNode.parentElement;

		var i = 0;
		while (parent.tagName !== "BODY"){
			if (i !== 0)
				parent = parent.parentElement;
			tree.push(parent);
			i++;
		} 
		//console.log(tree);
		var ids = tree.map(function(x){
			return x.id;
		});
		var check = ids.includes("carouselMy", 0); //меняем Карусель на Ридер
		//console.log(ids);
		
		if (check && Math.abs(focusOffset - anchorOffset) > 0) {
			//timer = setInterval(AtoB, 50);
			/*timer = setInterval(function () {
				if (bo < 1.0) {
					bo += .05;
					if (bo > 1.0) 
						bo = 1.0;
					btn.style.opacity = String(bo);
				}
				if (bo == 1.0)
					clearInterval(timer);	
			}, 50);*/
		}
	};
})();

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Литературный клуб</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	 <link rel="icon" href="imgs/pen_brand.ico" type="image/x-icon">
	 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	 <link rel="stylesheet" type="text/css" href="css/my.css">
	 <style>
	 	body {
			background: #fefcaf;
		}
		/*.container {
			background: red;
		}*/
	 </style>
	 
</head>
<body>

	
		<div class="navbar navbar-expand-sm navbar-dark" id="nb" style="width:100%">
			<a href="#" class="navbar-brand" id="nb-brand">
				<img src="imgs/pen_brand.svg" alt="Лого (временное)" width="50" height="50">
				Литературный клуб
			</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav nav nav-pills nav-fill">
					<li class="nav-item">
						<a class="nav-link active bg-success" href="#" id="check">Главная</a>
					</li>
					<li class="nav-item">
						<a class="nav-link text-nb bg-warning" href="#">Регистрация</a>
					</li>
					<li class="nav-item">
						<a class="nav-link text-nb bg-warning" href="#">Авторизация</a>
					</li>
					<li class="nav-item">
						<a class="nav-link text-nb bg-warning" href="#">Форум</a>
					</li>
				</ul>
				<form class="form-inline ml-auto">
					<input class="form-control" type="search" placeholder="Search">
					<button class="btn btn-success" type="submit">Поиск</button>
				</form>
			</div>
		</div>
		<div class="container">
		<h3>Новые поступления</h3>
		<div class="row">
			<div class="col-7">
				<div id="carouselMy" class="carousel my-carousel slide" data-ride="carousel">
					<div class="carousel-inner">
						<div class="carousel-item active">
							<div class="card">
								<div class="card-header">
									<h5 class="card-title">Евгений Онегин (А. Пушкин)</h5>
								</div>
								<div class="card body">
									<div class="row">
										<div class="col-5"><img class="card-img" src="imgs/onegin.jpeg" alt="Card image cap"></div>
										<div class="col-7 d-flex flex-column pl-0">
											<div>Роман в стихах русского поэта Александра Сергеевича Пушкина, написанный в 1823—1830 годах, одно из самых значительных произведений русской словесности. Повествование ведётся от имени безымянного автора, который представился добрым приятелем Онегина. По словам Белинского, Пушкин назвал «Евгения Онегина» романом в стихах, поскольку в нём изображена «жизнь во всей её прозаической действительности».</div>
											<div id="card-btn" class="align-self-center"><a href="#" class="btn btn-primary" >Перейти к чтению</a></div>
										</div>
									</div>
								</div>
								<div class="card-footer">
									
								</div>
							</div>
						</div>

						<div class="carousel-item">
							<div class="card">
								<div class="card-header">
									<h5 class="card-title">Война и мир (Л. Толстой)</h5>
								</div>
								<div class="card body">
									<div class="row">
										<div class="col-5"><img class="card-img" src="imgs/voyna_i_mir.jpg" alt="Card image cap"></div>
										<div class="col-7 d-flex flex-column pl-0">
											<div>Роман-эпопея Льва Николаевича Толстого, описывающий русское общество в эпоху войн против Наполеона в 1805 — 1812 годах. Эпилог романа доводит повествование до 1820 года.</div>
											<div id="card-btn" class="align-self-center"><a href="#" class="btn btn-primary" >Перейти к чтению</a></div>
										</div>
									</div>
								</div>
								<div class="card-footer">

								</div>
							</div>
						</div>
						
						<div class="carousel-item">
							<div class="card">
								<div class="card-header">
									<h5 class="card-title">Вечный зов (А. Иванов)</h5>
								</div>
								<div class="card body">
									<div class="row">
										<div class="col-5"><img class="card-img" src="imgs/vechny_zov.jpg" alt="Card image cap"></div>
										<div class="col-7 d-flex flex-column pl-0">
										<div>Три войны, революция, становление нового общественного строя — все это выпало на долю семьи Савельевых, выходцев из далекого сибирского села, обладателей сильных безудержных характеров. А если быть точнее, писатель описывает жизнь своих героев с начала ХХ века до 60-х годов. Трудна эта жизнь, но Савельевы умеют и любить страстно, и ненавидеть до последнего вздоха.</div>
										<div id="card-btn" class="align-self-center"><a href="#" class="btn btn-primary" >Перейти к чтению</a></div>
									</div>
									</div>
								</div>
								<div class="card-footer">

								</div>
							</div>
						</div>

						<div class="carousel-item">
							<div class="card">
								<div class="card-header">
									<h5 class="card-title">Горе от ума (А. Грибоедов)</h5>
								</div>
								<div class="card body">
									<div class="row">
										<div class="col-5"><img class="card-img" src="imgs/gore_ot_uma.jpg" alt="Card image cap"></div>
										<div class="col-7 d-flex flex-column pl-0"><div>Комедия в стихах Александра Сергеевича Грибоедова. Она сочетает в себе элементы классицизма и новых для начала XIX века романтизма и реализма. Она описывает светское общество времен крепостного права и показывает жизнь 1808—1824 годов. Само «действие происходит… спустя десять лет после войны 1812 года, то есть в 1822»</div>
										<div id="card-btn" class="align-self-center"><a href="#" class="btn btn-primary" >Перейти к чтению</a></div>
									</div>
									</div>
								</div>
								<div class="card-footer">

								</div>
							</div>
						</div>

						<div class="carousel-item">
							<div class="card">
								<div class="card-header">
									<h5 class="card-title">1984 (Дж. Оруэлл)</h5>
								</div>
								<div class="card body">
									<div class="row">
										<div class="col-5"><img class="card-img" src="imgs/1984.jpg" alt="Card image cap"></div>
										<div class="col-7 d-flex flex-column pl-0"><div>Роман-антиутопия Джорджа Оруэлла, изданный в 1949 году. Название романа, его терминология и даже имя автора впоследствии стали нарицательными и употребляются для обозначения общественного уклада, напоминающего описанный в романе «1984» тоталитаризм.</div>
										<div id="card-btn" class="align-self-center"><a href="#" class="btn btn-primary" >Перейти к чтению</a></div>
									</div>
									</div>
								</div>
								<div class="card-footer">

								</div>
							</div>
						</div>
					</div>
					<a class="carousel-control-prev" href="#carouselMy" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					</a>
					<a class="carousel-control-next" href="#carouselMy" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
					</a>
					<ol class="carousel-indicators">
						<li data-target="#carouselMy" data-slide-to="0" class="active"></li>
						<li data-target="#carouselMy" data-slide-to="1"></li>
						<li data-target="#carouselMy" data-slide-to="2"></li>
						<li data-target="#carouselMy" data-slide-to="3"></li>
						<li data-target="#carouselMy" data-slide-to="4"></li>
					</ol>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col">
				lorem*100
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="scripts/bootstrap.min.js"></script>
	<script src="scripts/main.js"></script>

</body>
</html>

Не могу понять причину, по которой таймер выполняется один раз. Перепроверил на то, что это - именно переменная, а не функция. Перепроверил написание методов. Без толку. Закомментировал оба варианта, чтобы показать, что ни один из них не работает так, как мне нужно.

Answer 1

(function() {
  var doc = document;
  doc.onselectionchange = function() {
    let { anchorNode, anchorOffset, focusNode, focusOffset } = document.getSelection();
    console.log("anchorOffset=", anchorOffset, "focusOffset", focusOffset);
    var btn = doc.getElementById("check");
    var bo = Number(btn.style.opacity) || 0;
    console.log(typeof bo, bo);
    var timer;
    var AtoB = function() {
      console.log("AtoB", typeof bo, bo);
      if (bo < 1.0) {
        bo += .05;
        if (bo > 1.0)
          bo = 1.0;
        btn.style.opacity = String(bo);
      }
      if (bo == 1.0)
        clearInterval(timer);
    };
    var tree = [];
    var parent = anchorNode.parentElement;

    var i = 0;
    while (parent.tagName !== "BODY") {
      if (i !== 0)
        parent = parent.parentElement;
      tree.push(parent);
      i++;
    }
    var ids = tree.map(function(x) {
      return x.id;
    });
    var check = ids.includes("carouselMy", 0); //меняем Карусель на Ридер

    if ( /*check &&*/ Math.abs(focusOffset - anchorOffset) > 0) {
      timer = setInterval(AtoB, 250);
    }
  };
})();

<button id="check">CHECK</button>
<div>AAA BBB CCC</div>

БЛОГ НА HUSL

Почему таймер запускается лишь один раз?

Ответы (1 шт):