将一个jQuery函数连接到引导程序的轮播幻灯片事件

Question

I created the following function:

//Toggle height of header-foto function
function height_toggler() {
    $('body').toggleClass('large-slider small-slider',500);
    $('#height-toggler').find('i').toggleClass('fa-rotate-270 fa-rotate-90');
}

I call this function when a user click the button:

// bind the function to a click on the toggler
$('#height-toggler').click( function() {
    height_toggler();
});

this works perfectly, you can see it live on this page

My client also wants this function bound on the Bootstrap Carousel's slide event and only on pages with 100% height carousels. I came up with the following code, but this triggers everytime the carousel slides (which I understand). How can I make it trigger only on the first slide after page load?

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
    $('.carousel').on('slide.bs.carousel', function () {
        height_toggler();
    });
}

Answer 1

You can use one() method.

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
  $('.carousel').one('slide.bs.carousel', function () {
    height_toggler();
  });
}

Answer 2

IF you want an event to be executed only once, you can use .one() instead of .on()

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
    $('.carousel').one('slide.bs.carousel', function () {
        height_toggler();
    });
}