运行一次后停止执行函数

I have a this function

我有一个这个函数。

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

that runs after the element appears on the pane by using this.

在元素出现在窗格之后运行。

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));
}

I want it to run ONCE and when the element is on the pane again the function won't trigger again.

我希望它运行一次，当元素在面板上时，函数不会再次触发。

I applied .one() to the parent function so it runs only once but that didn't do the trick.

我对父函数应用了。1()所以它只运行了一次，但这并没有起到什么作用。

You can check the Fiddle Demo to clarify the problem further.

你可以检查演示小提琴进一步澄清问题。

Note: I updated this question for clarity, since it seemed to create some misunderstandings.

注意:为了清晰起见，我更新了这个问题，因为它似乎产生了一些误解。

3 个解决方案

#1

Use .unbind() to remove the listener once it's been used:

使用.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

3 个解决方案

#1

更多相关文章

随机推荐