Viewport Checker - JQuery запустить цикл один раз

Question

Я использую видовую шашку, и я хочу анимацию работать только один раз, до сих пор я следующее: -

jQuery('#style-wrapper').viewportChecker({ 
    callbackFunction: function(elem) { 
     var flag = true; 
     interval = setInterval(function(){ 
      jQuery('.page-template-template-homepage .work-description').html('Different'); 
      jQuery('.page-template-template-homepage .work-description').css("font-weight", "700"); 
      jQuery('.page-template-template-homepage #style-wrapper').css("background", "#7ec4bf"); 
      jQuery('.page-template-template-homepage #style-wrapper').css("color", "#14143a"); 
     },1000); 
     interval = setInterval(function(){ 
      jQuery('.page-template-template-homepage .work-description').html('Distinct'); 
      jQuery('.page-template-template-homepage .work-description').css("font-weight", "900"); 
      jQuery('.page-template-template-homepage #style-wrapper').css("background", "#14143a"); 
      jQuery('.page-template-template-homepage #style-wrapper').css("color", "#FFFFFF"); 
     },2000); 
     interval = setInterval(function(){ 
      jQuery('.page-template-template-homepage .work-description').html('People'); 
      jQuery('.page-template-template-homepage #style-wrapper').css("background", "#b0a893"); 
     },3000); 
     interval = setInterval(function(){ 
      jQuery('.page-template-template-homepage .work-description').html('Want'); 
      jQuery('.page-template-template-homepage .work-description').css("font-weight", "900"); 
      jQuery('.page-template-template-homepage .work-description').css("font-size", "54px"); 
      jQuery('.page-template-template-homepage #style-wrapper').css("background", "#39779f"); 
      jQuery('.page-template-template-homepage #style-wrapper').css("color", "#14143a"); 
     },4000); 
     if (flag) { 
      interval = setInterval(function(){ 
       flag = false; 
      },5000); 
     } 
    } 
}); 

, но по какой-то причине он продолжает цикл снова и снова снова (и по какой-то неизвестной причине, когда он петли второй раз, он начинает двигаться в другой последовательности).

Любые идеи?

Answer 1

setInterval должен быть установлен на переменную, чтобы правильно очистить. Вот быстрый demo, который я объяснил.

var myInterval; 

$('button[name="start"]').click(function(){ 
    myInterval = setInterval(function(){ 
     $('body div').prepend('Oh Hai! '); 
    }); 
}); 

$('button[name="end"]').click(function(){ 
    clearInterval(myInterval); 
}); 

Как примечание стороны, я могу спросить, почему вы создаете интервал/цикл, если вы только хотите, чтобы назвать один раз?

Попробуйте это:

if (flag) { 
    clearInterval(interval); 
} 

Edit:

Так что я думал изначально, вы можете использовать метод animate() для достижения этой цели через свои функции обратного вызова, но потом я понял половину стилей вас пытаясь изменить, не принимайте анимацию без плагинов. То, что я придумал, дает вам 4 этапа выбора стиля/анимации css. Каждый этап вложен в обратный вызов метода animate(). Он изменит текстовую строку с помощью метода html() и настроит любые изменения стиля, которые у вас есть в методах css() или animate(). Тайминги сохраняются в объекте anim и могут быть легко отрегулированы. Очевидно, вам все равно нужно будет немного поработать, чтобы немного изменить это, чтобы соответствовать вашим конкретным потребностям, но, надеюсь, это поможет вам начать!

DEMO

var anim = { 
    config: { 
     slideDelay: 1000, // Each step will take 1 second 
     intervalDelay: 8000 // The entire loop will wait 8 seconds between iterations 
    }, 
    run: function(selector){ 
     console.log('test'); 
     $('.selector').html('Different').css({ // Change any CSS Components (Stage1) 
      'background' : '#7ec4bf', 
      'color'   : '#14143a', 
      'font-size'  : '20px' 
     }).animate({ // Option to animate components (Stage1) 
      'font-weight' : 400 
     }, anim.config.slideDelay, function(){ 
      $('.selector').html('Distinct').css({ // Change any CSS Components (Stage2) 
       'background' : '#14143a', 
       'color'   : '#FFFFFF', 
       'font-size'  : '10px' 
      }).animate({ // Option to animate components (Stage2) 
       'font-weight' : 600 
      }, anim.config.slideDelay, function(){ 
       $('.selector').html('People').css({ // Change any CSS Components (Stage3) 
        'background' : '#b0a893' 
       }).animate({ // Option to animate components (Stage3) 
        'font-weight' : 900 
       }, anim.config.slideDelay, function(){ 
        $('.selector').html('Want').css({ // Change any CSS Components (Stage4) 
         'background' : '#39779f', 
         'color'   : '#14143a', 
         'font-size'  : '30px' 
        }).animate({ // Option to animate components (Stage4) 
         'font-weight' : 100 
        }, anim.config.slideDelay); 
       }); 
      }); 
     }); 
    } 
}; 

var test = setInterval(anim.run, anim.config.intervalDelay);