How can I stop a running function on a button click or page scroll?

Question

A video autoplays on page load, and when it's finished the page automatically scrolls down to the main content container.

When a user either clicks the scroll-down button, or scrolls the page manually, I need this automatic scroll to be cancelled.

I've got the autoscroll part working. I'm struggling with stopping it happening if the user interacts.

https://codepen.io/alexconnor/pen/bGbYgda

function scrollToMain() {
  $('html, body').animate({
    scrollTop: ($('#main-content-container').offset().top)
  }, 2000);
}

$('#homepage-video').on('ended', function() {
  scrollToMain();
});

$('.arrow-scroll-down').click(function() {
  $('#homepage-video').off('ended', function() {
    scrollToMain();
  });
  scrollToMain();
});

$(window).scroll(function() {
  $('#homepage-video').off('ended', function() {
    scrollToMain();
  });
});

#video-container,
#main-content-container {
  height: calc(100vh);
}

.arrow-scroll-down {
  font-size: 28px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="video-container">
  <video id="homepage-video" class="hp-video__video" tabindex="0" autobuffer="autobuffer" preload="preload" muted autoplay>
    <source src="https://v.ftcdn.net/01/93/01/28/700_F_193012896_tKFDpztvreS9PTlqINL2STlk2oxkr7na_ST.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
  </video>
  <div class="arrow animated bounce">
    <a href="#" class="arrow-scroll-down"><i class="fas fa-chevron-down"></i></a><br />
  </div>
</div>

<div id="main-content-container">
  <h1>Main Content Container</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

set one flag and on any click make it false, and based on that place condition in `scrollToMain()` — Devsi Odedra, Sep 04 '19 at 09:27
Jquery comes with a [`.stop()`](https://api.jquery.com/stop/) function to cancel any running anymation on a specific element, this combinded with [this question](https://stackoverflow.com/q/31467098/4202224) might help you — empiric, Sep 04 '19 at 09:28
Your attempt at removing the event handlers is fundamentally wrong. Removing specific event handlers needs the reference to the exact handler function that was bound to handle the event in the first place - with your anonymous functions you don’t have that here. Those _look_ the same, but they _aren’t_ the same function. But you don’t need these anonymous wrapper functions here in the first place, you can bind `scrollToMain` as the handler function directly. — misorude, Sep 04 '19 at 09:49
Or, assuming you aren’t binding _multiple_ `ended` handlers for the video to begin with, you could just remove _all_ `ended` handlers (“all” just being a single one then in this case) with `$('#homepage-video').off('ended')` — misorude, Sep 04 '19 at 09:51
And a third option would be, that you simply use a flag to determine if scrolling should happen or not. You set that flag to false in your click/scroll handlers, and inside the video ended handler function which you leave in place, you simply check that flag - and then either call the animate method, or - not. — misorude, Sep 04 '19 at 09:54
I used a flag, and it seems to have worked how I need it. Thanks. I'll post the answer below. — alexconnor7, Sep 04 '19 at 10:29

score 0 · Answer 1 · answered Sep 04 '19 at 10:30

Here's what I ended up with:

var scrollFlag = true;

function scrollToMain() {
    $('html, body').animate({
        scrollTop: ($('#main-content-container').offset().top)
    },2000);
}

$('.arrow-scroll-down').click(function() {
  scrollFlag = false;
  scrollToMain();
});

$(window).scroll(function() {
  scrollFlag = false;
});

$('#homepage-video').on('ended',function() {
  if (scrollFlag == true) {
    scrollToMain();
  }
});

How can I stop a running function on a button click or page scroll?

1 Answers1