javascript - 如何在鼠标滚轮上使用 jquery 调用一次函数？

Question

我有一个部分，一旦进入，正文的溢出就会设置为隐藏，并且用户必须滚动以触发某些动画，然后才能继续下一部分。我使用 var delta = e.originalEvent.wheelDelta; 来捕获任何滚动尝试。我的问题是，当我使用 .on('mousewheel') 时，我只需要一次，但返回的是对该函数的多次调用。我怎样才能实现这个目标？谢谢。这是我正在使用的代码:

$('html').on ('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;
    if($('body').hasClass('fp-viewing-secondPage')) {
        if(delta < 0 ){
            var something = (function() {
                var executed = false;
                return function () {
                    if (!executed) {
                        executed = true;
                        console.log('call me once please');
                    }
                };
            });
            something();
         }

     });
}

这是我尝试过的其他内容:

if($body.hasClass('fp-viewing-secondPage')) {
                    if($body.hasClass('setAn1')){
                        $('html').one('mousewheel', function (e) {
                            var delta = e.originalEvent.wheelDelta;
                            console.log('animation 1');
                            $body.addClass('setAn2').removeClass('setAn1');
                        });
                    } if($body.hasClass('setAn2')){
                        $('body').one('mousewheel', function (e) {
                            var delta = e.originalEvent.wheelDelta;
                            console.log('animation 2');
                            $body.addClass('setAn3');
                        });
                    } if($body.hasClass('setAn3')){
                        $('html').one('mousewheel', function (e) {
                            var delta = e.originalEvent.wheelDelta;
                            console.log('animation 3');
                            alert('moving on to next section');
                        });
                    }
                }

但是这段代码只运行第一个setAn1？是因为.one吗？

Answer 1

检查这个JS Fiddle ，而不是 on('mousewheel) 我使用 on('scroll' 只是为了演示目的。

因此，secret 设置为 false，一旦我们进入 div#test 部分，我们就会运行该函数 - 在这种情况下，console.log() - 然后将 secret 设置为 true，因此该函数只会被调用一次。

然后，当我们离开该部分时，将 secret 设置回 false，以便在输入 #test 时可以再次运行所需的函数更多次，但该函数仍然每次只会被触发一次。

var secret = false,
    testTop = $('#test').offset().top,
    testHeight = $('#test').height(),
    scrlTop;

$(window).on('scroll', function(){
	scrlTop = $(this).scrollTop();
  if(scrlTop > testTop && scrlTop < testTop+testHeight){
  	if(!secret){
    	console.log('call me once please');
      secret = true;
    }  	
  }else{
  	secret = false;  	
  }
});

body{ margin:0; padding:0; height:1500px; background-color:orange; }
#test{ margin-top:700px; height:400px; width:100%; background-color:#090; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test"></div>

<小时/>

每次进入 #test 部分时，上面的代码都会触发该函数一次，但是如果您的目标是仅运行该函数一次，那么无论是否无论他是否离开该部分，只需删除这部分即可:JS Fiddle 2

else{
    secret = false;
} 

<小时/>

----------

更新1:

有了这个JS Fiddle 3 -updated 2使用以下代码:-更新-

var secret = [false, false, false, false, false],
    sections = $('.sections'),
    secHeight = $('#one').height(),
    body = $('html, body'), //select both html and body cross-browser fix
    links = $('#links a'),
    prevLinkId = 0,
    linkId, secHeight, scrlTop, diff;
    
links.each(function(index){
    $(this).on('click', function(e){
        e.preventDefault();
        secHeight = $('#one').height();
        linkId = $(this).attr('id');
        linkId = linkId.replace('lnk', '');
        links.removeClass('highlight');
        $(links[linkId]).addClass('highlight');
        diff = Math.abs(linkId - prevLinkId);
        timeDelay = diff * 250;
        distance = index * secHeight;
        body.animate({scrollTop: distance} , timeDelay);
        prevLinkId = linkId;
    });
});
    
$(window).on('scroll', function(){
    scrlTop = $(this).scrollTop();
    playOnce();
});

$(window).on('DOMMouseScroll mousewheel', function(e){
    scrlTop = $(this).scrollTop();
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
        //scroll down
        body.animate({scrollTop: scrlTop + 50} , 20);
    }else {
        //scroll up
        body.animate({scrollTop: scrlTop - 50} , 20);
    }
    playOnce();
});

function playOnce(){
    secHeight = $('#one').height();
    if(scrlTop >= 0 && scrlTop < secHeight){
        if(secret[0] == false){
            console.log('this is Section One');
            secret = [true, false, false, false, false];
        }
    }else if(scrlTop >= secHeight && scrlTop < 2 * secHeight){
        if(secret[1] == false){
            console.log('this is Section Two');
            secret = [false, true, false, false, false];
        }
    }
    else if(scrlTop >= 2 * secHeight && scrlTop < 3 * secHeight){
        if(secret[2] == false){
            console.log('this is Section Three');
            secret = [false, false, true, false, false];
        }
    }
    else if(scrlTop >= 3 * secHeight && scrlTop < 4 * secHeight){
        if(secret[3] == false){
            console.log('this is Section Four');
            secret = [false, false, false, true, false];
        }
    }else if(scrlTop >= 4 * secHeight && scrlTop < 5 * secHeight){
        if(secret[4] == false){
            console.log('this is Section Five');
            secret = [false, false, false, false, true];
        }
    }
}

body{
  margin:0;
  padding:0;
  height:1500px;
  overflow:hidden;
}
#links{
  width:65px;
  height:30px;
  line-height:30px;
  background-color:rgba(0,0,0, 0.7);
  margin-top:5px;
  margin-left:-10px;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  color:white;
  padding-left:20px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.6);
  position:fixed;
  z-index:1000;
  overflow:hidden;
  transition:all 0.5s ease-in-out;
  cursor:default;
}
#links:hover{
  width:190px;
  transition:all 0.5s ease-in-out;
}
#links a{
  width:22px;
  line-height:22px;
  display:inline-block;
  border-radius:50%;
  text-decoration:none;
  color:#444;
  background-color:rgba(255,255,255, 0.7);
  text-align:center;
  font-weight:bold;
  transition:all 0.3s ease-in-out;
}
#links a:hover, #links .highlight{
  background-color:black;
  color:#EEE;
}
.sections{
  width:100%;
  height:100vh;
  color:white;
  text-align:center;
  font-size:72px;
  line-height:100vh;
  text-shadow:0 0 5px rgba(0,0,0,0.7);
}
#one{background-color:green}
#two{background-color:orange}
#three{background-color:tomato}
#four{background-color:skyblue}
#five{background-color:navy}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="links">
  Section
  <a id="lnk0" href="#one" class="highlight">1</a>
  <a id="lnk1" href="#two">2</a>
  <a id="lnk2" href="#three">3</a>
  <a id="lnk3" href="#four">4</a>
  <a id="lnk4" href="#five">5</a>
</div>
<div id="one" class="sections">Section ONE</div>
<div id="two" class="sections">Section TWO</div>
<div id="three" class="sections">Section THREE</div>
<div id="four" class="sections">Section FOUR</div>
<div id="five" class="sections">Section Five</div>

TL;DR
使用 5 个 .sections div 模拟全页部分，以及一组切换 -或标志- secret = [false, false, false, false, false]，因为拥有 body{overflow:hidden} 不会使页面滚动，我们需要监听 mouseweel 事件并使用此检测滚动的方向代码:

// Listening to DOMMouseScroll and mousewheel events together will make
// this code work correctly cross-browser.
// same thing for e.originalEvent.detail and e.originalEvent.wheelDelta
$(window).on('DOMMouseScroll mousewheel', function(e){
    scrlTop = $(this).scrollTop();
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
        //scrolling down
        body.animate({scrollTop: scrlTop + 50} , 20);
    }else {
        //scrolling up
        body.animate({scrollTop: scrlTop - 50} , 20);
    }
    // calling playOnce function
    playOnce();
});

现在在 playOnce() 函数中，我们有 5 个级别的 if 语句，每个级别检查 scrollTop() 值以查看窗口是否位于相应的 上.section div，即:

else if(scrlTop >= 3 * secHeight && scrlTop < 4 * secHeight){
if(secret[3] == false){ // 3 because arrays starts from zero
    console.log('this is Section Four');
    // we set the 4th element in the secret array to true and the rest to
    // false, thus we ensure that we don't fire the function more than once
    // as long as the user has not left the 4th element upward or down
    secret = [false, false, false, true, false]; 
} 

<小时/>

----------

更新2:

如果您不想在用户离开某个部分然后滚动回该部分时调用该函数 -重复动画，请查看此 JS fiddle 4 ，您需要在 javascript 中进行的唯一更改是，在某个部分中，不要将 secret 数组中的相应元素设置为 true 并将所有其他元素设置为 false，我们设置其之前的部分与 DOM 排名有关。因此，对于第 3 部分，secret 数组将为:

secret = [true, true, true, false, false];

而不是:

secret = [false, false, true, false, false];

在之前的解决方案中，您可以在每次离开某个部分后滚动回某个部分时调用该函数。