通過scrollTop()判斷滾動條到指定位置執(zhí)行動畫，代碼執(zhí)行很多次怎么辦？

1.通過scrollTop()判斷滾動條到指定位置執(zhí)行動畫，代碼執(zhí)行很多次怎么辦？
點擊查看DEMO，請用瀏覽器模擬手機查看效果，console.log有打印執(zhí)行次數(shù)。

現(xiàn)在的問題是我每次滾動他就執(zhí)行一次，然后往回滾也會一直執(zhí)行，一直判斷scrollTop()，這樣肯定會很卡，所以來請教大神們怎么解決。

HTML代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="box1"><img src="http://img.alicdn.com/tfs/TB1S53efxrI8KJjy0FpXXb5hVXa-520-280.jpg"></div>
  <div class="box2">
        <div class="item1 tinRightIn"></div>
        <div class="item2 tinRightIn"></div>
        <div id="test" class="item3 tinRightIn"></div>
    </div>
    <div class="box3">
        <div class="c1 tinRightIn"></div>
        <div class="c2 tinRightIn"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

JS代碼如下：

var nummmm = 0; 
$(document).ready(function () {            
     $(window).scroll(function () {                
         if ($(window).scrollTop() > 100) {
             $('.box2').addClass('animation-show');
             console.log(nummmm++);
         }
         if ($(window).scrollTop() > 600) {
             $('.box3').addClass('animation-show');
             console.log('test2');
         }
     });
 });
//動畫結束時事件
var item2 = $(".item2")
document.querySelector('#test').addEventListener("webkitAnimationEnd", function(){ 
    this.className = this.className.replace('tinRightIn', 'show');
    item2.addClass("hidden");
    console.log(2); 
}, false);

CSS代碼如下：

*{margin: 0;padding:0}
html,body{width:100%;}
img{
 width: 100%; 
}
.box2,.box3{
    width:100%;
    background: #ddd;
}
.box3{background: #eee;}
.item1,.item2,.item3{
    height: 500px;
    background: #ff0;
    margin-bottom: 30px;
}
.c1,.c2,.c3{
    height: 500px;
    background: red;
    margin-bottom: 30px;
    opacity: 0;
}
.item3{
    opacity: 0;
}
.hidden{
    opacity: .5;
}
.show{
    opacity: 1;
}
.animation-show .tinRightIn{
    -webkit-animation: tinRightIn 1.2s ease 1.2s;
    animation: tinRightIn 1.2s ease 1.2s;
}
@-webkit-keyframes tinRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2rem) translateY(-2rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
    }
}

不知道要這樣判斷動畫是否執(zhí)行完這樣的方法對不對呢？

回答

編輯回答

枕邊人

var nummmm = 0;
$(document).ready(function () {

var timer          
 $(window).scroll(function () {  
     clearTimeout(timer)
     timer=setTimeout(function(){
         if ($(window).scrollTop() > 100) {
             $('.box2').addClass('animation-show');
             console.log(nummmm++);
         }
         if ($(window).scrollTop() > 600) {
             $('.box3').addClass('animation-show');
             console.log('test2');
         }
     },200)//這個時間你可以測試下，選擇一個適合的時間
 });

});

2018年1月15日 12:41

編輯回答

孤客

全局做一個標記，執(zhí)行的時候先判斷此標記是否為true，是的話就說明執(zhí)行過了。如果是false的話再執(zhí)行。

2018年6月1日 03:05

編輯回答

憶當年

詳細可以自己搜一下函數(shù)節(jié)流 -。-

2017年7月1日 07:26

編輯回答

獨特范

$(document).ready(function () {            
     $(window).scroll(function () {                
         if ($(window).scrollTop() > 100) {
             if(!$('.box2').hasClass('animation-show')){
             $('.box2').addClass('animation-show');
             console.log(nummmm++);
             }
         }
         if ($(window).scrollTop() > 600) {
             if(!$('.box3').hasClass('animation-show')){
             $('.box3').addClass('animation-show');
             console.log('test2');
             }
         }
     });
 });

2017年3月16日 19:47

編輯回答

近義詞

var nummmm = 0;
let Ani_is_finish = {
        argument_1:true,
        argument_2:true
 };
$(document).ready(function () {
        $(window).scroll(function () {
            if (Ani_is_finish['argument_1'] && $(window).scrollTop() > 100) {
                $('.box2').addClass('animation-show');
                console.log(nummmm++);
                Ani_is_finish['argument_1'] = false;
            }
            if (Ani_is_finish['argument_2'] && $(window).scrollTop() > 600) {
                $('.box3').addClass('animation-show');
                console.log('test2');
                Ani_is_finish['argument_2'] = false;
            }
        });
});

2018年7月15日 16:51