정지 기능은 한 번

Question

나는 요소가이를 사용하여 창에 표시 한 후 실행이 기능

function toDiv() { 
$(".wrap"))) 

    $('.barfill').each(function(){ 
     var width=$(this).data('width'); 
     $(this).animate({ width: width }, 500); 
     var $perctext = $('<div>', {'class': 'perctext', text: width}); 
     $perctext.appendTo(this); 
     $perctext.delay(500).each(function(a) { 
      $(this).delay(a * 250).animate({ 
      'left': width 
     }, 1000); 
    }); 
}); 
else {} 
} 

있습니다.

function toView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

나는 실행 ONCE에 원하는 요소가 창에있을 때 다시 함수는 다시 실행되지 않습니다. 이 한 번만 실행되도록

나는 부모 함수에 사실 말이다()을 적용하지만 트릭을하지 않았다.

Fiddle Demo에서 문제를 더 명확하게 확인할 수 있습니다.

주 : 몇 가지 오해를 만들 것 같았다 이후 나는 명확하게이 질문을 업데이트했습니다. 이 사용 된 후에는

Answer 1

사용 .unbind()는 리스너를 제거합니다 :

$(window).scroll(toDiv); 

function toView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

function toDiv() { 

    if (toView(
    $(".wrap"))) { 
     $('.barfill').each(function() { 
      var width = $(this).data('width'); 
      $(this).animate({ 
       width: width 
      }, 500); 
      var $perctext = $('<div>', { 
       'class': 'perctext', 
       text: width 
      }); 
      $perctext.appendTo(this); 
      $perctext.delay(500).each(function (a) { 
       $(this).delay(a * 250).animate({ 
        'left': width 
       }, 1000); 
      }); 
     }); 
     $(window).unbind('scroll'); 
    } 
} 

JSFiddle

Answer 2

function highlander(fn) { 
    return function() [ 
    if (fn) { 
     fn.apply(this, arguments); 
     fn = null; 
    } 
    } 
} 

var printHello = highlander(function() { 
    console.log('Hello'); 
}); 

printHello(); 
printHello(); 
printHello(); 
// will print hello only once! 

Answer 3

귀하의 솔루션은 단순히 발견해야한다, 원래 카운터 원칙적으로.

// define a counter 
var counter = 0; 
$(window).scroll(toDiv); 
function toView(elem) { 
    //check the counter value 
    if (counter > 0) return false;  
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height();  
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 

} 
function toDiv() { 
    if (toView(
     $(".wrap"))) 

     $('.barfill').each(function(){ 
      // increase the counter value 
      counter++; 
      var width=$(this).data('width'); 
      $(this).animate({ width: width }, 500); 
      var $perctext = $('<div>', {'class': 'perctext', text: width}); 
      $perctext.appendTo(this); 
      $perctext.delay(500).each(function(a) { 
       $(this).delay(a * 250).animate({ 
        'left': width 
       }, 1000); 
      }); 
     }); 

    else { 

     } 

} 

당신은 보이는 DEMO