Javascript 停止函数在运行一次后执行

我有一个此功能

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 {}
}

函数toDiv（）{ $（“.wrap”）） $（'.barfill'）。每个（函数（）{ 变量宽度=$（this）.data（'width'）； $（this.animate（{width:width}，500）； var$perctext=$（“”，{'class'：'perctext'，text:width}）； $perctext.appendTo（本）； $perctext.延迟（500）。每个功能（a）{ $（此）。延迟（a*250）。设置动画({ “左”：宽度 }, 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));
}

功能视图（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}

我希望它运行一次，当元素再次出现在窗格中时，该函数将不会再次触发

我对父函数应用了.one（），因此它只运行一次，但没有起作用

您可以检查以进一步澄清问题

注意：为了清楚起见，我更新了这个问题，因为它似乎造成了一些误解

用于在侦听器被使用后将其删除：

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!

$(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');
    }
}

$（窗口）。滚动（toDiv）；
功能视图（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
函数toDiv（）{
如果（toView(
$（“.wrap”））{
$（'.barfill'）。每个（函数（）{
变量宽度=$（this）.data（'width'）；
$（此）。设置动画({
宽度：宽度
}, 500);
变量$perctext=$（''{
“类”：“perctext”，
文本：宽度
});
$perctext.appendTo（本）；
$perctext.延迟（500）。每个功能（a）{
$（此）。延迟（a*250）。设置动画({
“左”：宽度
}, 1000);
});
});
$（窗口）。解除绑定（“滚动”）；
}
}

---

您的解决方案应该在原始的反原则中找到

// 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 {

         }

}

//定义一个计数器
var计数器=0；
$（窗口）。滚动（toDiv）；
功能视图（elem）{
//检查计数器值
如果（计数器>0）返回false；
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
函数toDiv（）{
如果（toView(
$（“.wrap”））
$（'.barfill'）。每个（函数（）{
//增加计数器值
计数器++；
变量宽度=$（this）.data（'width'）；
$（this.animate（{width:width}，500）；
var$perctext=$（“”，{'class'：'perctext'，text:width}）；
$perctext.appendTo（本）；
$perctext.延迟（500）。每个功能（a）{
$（此）。延迟（a*250）。设置动画({
“左”：宽度
}, 1000);
});
});
否则{
}
}

---

签出这并不比OP已经表示不需要的

.one（）

更有用。@jfriend00谢谢。最初的问题不是很清楚。更新确实让事情变得更清楚了。你似乎因为一个完全可以接受的问题被否决了。向上投票反对。@HélioC相反的原则，我认为，应该更简单。接受并向上投票。快速问题：与创建标志以检查是否已执行相比，取消绑定是更好的做法？还是简单地说是一个简单的方法来实现它？@HélioC Unbind是一个更好的练习，我只是有一个大脑放屁。很抱歉。