javascript - 功能的禁用/启用按钮不起作用

Question

函数 animateIt 在滚动时更改 div 文本颜色，我希望 div#disable 停止此函数，直到我单击 div#enable。如您所见，我写了这段代码，但#disable 部分不起作用，所以请检查它并让我知道哪里出了问题。

var enable = true;

$('#enable').on('click', function() {
  if (!enable) {
    enable = true;
    animateIt(); // call again after enabled...
  }
});
$('#disable').click(function () {
  enable = false;
  $('#disable').css('background','blue');
});

function animateIt() {
if (!enable) return;
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if ( scroll > 0 && scroll < 1000) {
		$('.position').css({
'color':'red))',
'background':'rgba(0,40,90,1.00)'
			})
		$('.position2').css({
'color':'rgba(255,248,0,1.00)',
			})
		$('.position3').css({
'color':'rgba(255,0,215,1.00)',
			})
		}
   if ( scroll > 1000 && scroll < 2000) {
		$('.position').css({
'color':'green',
'background':'rgba(255,0,144,1.00)'
			})
		$('.position2').css({
'color':'rgba(0,100,206,1.00)',
			})
		$('.position3').css({
'color':'rgba(0,255,7,1.00)',
			})
		}
   if ( scroll > 2000 && scroll < 3000) {
		$('.position').css({
'color':'yellow',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(155,0,255,1.00)',
			})
		$('.position3').css({
'color':'rgba(224,224,224,1.00)',
			})
		}
	
    if ( scroll > 3000 && scroll < 4000) {
		$('.position').css({
'color':'orange',
'background':'rgba(255,2,6,1.00)'
			})
		$('.position2').css({
'color':'rgba(69,66,179,1.00)',
			})
		$('.position3').css({
'color':'rgba(124,141,245,1.0)',
			})
		}
    if ( scroll > 4000 && scroll < 5000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(224,224,224,1.00)',
			})
		$('.position3').css({
'color':'rgba(155,0,255,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'cyan',
'background':'rgba(255,238,0,1.00)',
'text-shadow':'none'
			})
		$('.position2').css({
'color':'rgba(176,50,0,1.0)',
			})
		$('.position3').css({
'color':'rgba(100,16,5,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'blue',
'background':'rgba(243,255,217,1.00)',
			})
		$('.position2').css({
'color':'rgba(136,168,191,1.0)',
			})
		$('.position3').css({
'color':'rgba(68,47,168,1.0)',
			})
		}
var color=$('.position').css('color');
$('#p1color').html(color); 
var color=$('.position2').css('color');
$('#p2color').html(color);
var color=$('.position3').css('color');
$('#p3color').html(color);
  
		});
}
animateIt();

body{text-align:center; height:10000px;}
#disable{width:50px; height:50px; position:fixed; float:right; background:red;}
.position{
color:rgba(0,255,65,1.00);
background:rgba(0,40,90,1.00);
font-weight:900; 
font-size:12px;
font-family:mono; 
margin-top:0;
overflow:hidden;
display:inline-block;
margin-top:40px;
position:fixed;

}
.position2{
color:rgba(255,0,215,1.00);
font-weight:900; 
font-size:12px;
font-family:mono; 
margin-top:0;
overflow:hidden;
display:inline-block;
margin-top:20px;
  position:fixed;
}
.position3{
color:rgba(255,248,0,1.00);
font-weight:900; 
font-size:12px;
font-family:mono; 
margin-top:0;
overflow:hidden;
display:inline-block;
margin-top:60px;
position:fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="disable">
</div>
<div class="position">
  A
  </div>
<div class="position2">
  B
  </div>
<div class="position3">
  C
  </div>

Answer 1

问题在于设置绑定(bind)到滚动事件的函数(例如 $(window).scroll(function(event) {}) )当该函数被绑定(bind)时，它的绑定(bind)。从那时起，当您滚动时该函数将触发，并且每次您调用 animate 时，如果 enable 为真，您只是重新绑定(bind)该函数。您需要做的是将启用变量放入绑定(bind)到滚动事件的函数中。

$(window).scroll(function(event) {
    if (!enable) return;
    // otherwise do fancy color stuff
});

这样你就可以将 javascript 简化为

 var enable = true;

 $('#enable').click(function() {
      enable = true;
 });

 $('#disable').click(function() {
      enable = false;
 });

 $(window).scroll(function(event) {
    if (!enable) return;
    // rest of code
 }

希望对您有所帮助!