CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1374796
user1374796

Reputation: 1582

jQuery: Pause function on mousemove or click

I've created a function that autoscrolls up and down the page on repeat, I'm now looking to extend this slightly as I want to have to ability to pause the autoscrolling when the user moves the mouse.

Basically the idea is that the page will autoscroll if the user isn't moving their mouse, as soon as they do this function will pause and they'll take over the interaction...until they stop again.

I have a jsFiddle. This scrolls up and down as it should but now I need to pause as soon as an interaction is made, or pause and restart the animation upon clicking the .start and .stop respectively. My markup as follows: 

//run instantly and then goes after (setTimeout interval)
function autoScroll() {

    $("html, body").animate({
        scrollTop: $(document).height()
    }, 4000);
    setTimeout(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 4000);
    }, 4000);
    setInterval(function() {
        // 4000 - it will take 4 secound in total from the top of the page to the bottom
        $("html, body").animate({
            scrollTop: $(document).height()
        }, 4000);
        setTimeout(function() {
            $('html, body').animate({
                scrollTop: 0
            }, 4000);
        }, 4000);

    }, 8000);

}

autoScroll();

Any suggestions on this would be greatly appreciated!

Upvotes: 2

Views: 632

Answers (2)

vsync
vsync

Reputation: 130431

The below method will "pause" a function (more like the code within it) by checking if a mouseIsMoving flag is set or not, as long as the mouse is moving:

var mouseIsMoving,
    // time (ms) after mouse stoped moving to set the flag back to false;
    mouseMoveTime = 500; 
    
window.addEventListener('mousemove', ()=>{  
  clearTimeout(mouseIsMoving);
  mouseIsMoving = setTimeout(()=>{ mouseIsMoving = false }, mouseMoveTime);
});

/////////////////////////////////////////////////////
// fire some function every 500ms

setInterval(someFunc, 500);

function someFunc(){
  // do whatever ONLY when the mouse is not moving
  if( !mouseIsMoving )
    console.log( new Date().toLocaleTimeString() )
}

Upvotes: 1

codtex
codtex

Reputation: 6558

This is a DEMO fork of your fiddle.

HTML

<div style="height:2000px; float:left; width:100%;">
  Text text Text text Text text Text text Text text Text text Text text Text text Text textv Text text Text text Text text Text textText text

</div>

<div class="start">
  START
</div>
<div class="stop">
  STOP
</div>

JS

var autoScrollInterval;
var autoScrollTimeout;
var mouseMoveTimeout = null

function startAutoScroll() {
    autoScroll();
  autoScrollInterval = setInterval(autoScroll, 8000);
}

function autoScroll() {
  $("html, body").animate({
    scrollTop: $(document).height()
  }, 4000);
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 4000);
  }, 4000);
}

$(document).on('mousemove', function() {
    // Stop animation
        $("html, body").stop();

    // clear timeouts and intervals
    clearTimeout(mouseMoveTimeout);
    clearTimeout(autoScrollTimeout);
        clearInterval(autoScrollInterval);

    mouseMoveTimeout = setTimeout(function() {
        // restore auto scrolling
        startAutoScroll();
    }, 1000);
});

$(document).ready(function() {
  startAutoScroll();
});

In short I used jQuery's mousemove to detect if mouse is moving and then clear intervals and timeouts.

If you want to change the time when autoscroll should start again change it here, now is set to 1 second:

mouseMoveTimeout = setTimeout(function() {
        // restore auto scrolling
        startAutoScroll();
}, 1000); // change time when autoscroll starts here

EDIT

Your statement is good that autoscroll should be disabled when user is scrolling and I made such version of the code HERE

Now we take care for DOMMouseScroll(when browser is Firefox) and mousewheel events because $().on('scroll') will disable the whole code snippet to work(we should detect if scroll is made by the user).

UPDATED JS

var autoScrollInterval;
var autoScrollTimeout;
var restoreTimeout = null

function autoScroll() {
  $("html, body").animate({
    scrollTop: $(document).height()
  }, 4000);
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 4000);
  }, 4000);
}

function startAutoScroll() {
  autoScroll();
  autoScrollInterval = setInterval(autoScroll, 8000);
}

function stopAutoScroll() {
  // Stop animation
  $("html, body").stop();

  // clear timeouts and intervals
  clearTimeout(restoreTimeout);
  clearTimeout(autoScrollTimeout);
  clearInterval(autoScrollInterval);

  restoreTimeout = setTimeout(function() {
    // restore auto scrolling
    startAutoScroll();
  }, 1000);
}

//Firefox
$(document).bind('DOMMouseScroll', function(e) {
  stopAutoScroll()
});

//IE, Opera, Safari
$(document).bind('mousewheel', function(e) {
  stopAutoScroll()
});

$(document).on('mousemove', function() {
    stopAutoScroll();
});

$(document).ready(function() {
  startAutoScroll();
});

Upvotes: 0

Related Questions