Use .destroy(); with Waypoints but only on one object

问题

I have two different objects I'm using to trigger two different Waypoints events which then trigger Velocity.js (a fade in/out library).

The first even (the one on secondary) should fire eternally, up and down and every time. The second however, on .process should only fire once and then never again until the page is reloaded.

When I insert .destroy(); in the second function, it shuts off all waypoints events for the entire page. Any idea why?

Page in reference: http://www.goodcorps.com/

if (document.documentElement.clientWidth > 990) {

    $('.secondary').waypoint(function(direction) {
        $('.intro').toggleClass('hidden');
    }, { 
        offset: "0%",
    });

    $('.home .process').waypoint(function(direction) {
        $('.illus.crosses svg g').velocity("transition.fadeIn", { 
            stagger: 50,
            duration: 100,
        });
        $(this).destroy(); // here's my attempted location
    }, { 
        offset: "20%",
    });

     } else {

    $('.home .process').waypoint(function(direction) {
        $('.illus.crosses svg g').velocity("transition.fadeIn", { 
            stagger: 50,
            duration: 100,
        });
        $(this).destroy(); // here's my attempted location
    }, { 
        offset: "50%",
    });
}

回答1:

The page you shared doesn't appear to contain the destroy calls you reference in your code sample, but if they were included you should have seen an uncaught TypeError "undefined is not a function". The reason: You're calling $(this).destroy() instead of this.destroy(). destroy is a function on a Waypoint instance. When you try to call it on a jQuery object, which $() will return, it should have blown up on you in the console because destroy is not a jQuery method. Am I missing something here?

来源：https://stackoverflow.com/questions/28643069/use-destroy-with-waypoints-but-only-on-one-object