Keep the operation going until the mouse button is no longer pressed

Question

Keep the operation going until the mouse button is no longer pressed

Is there a way to have the function below run continuously while the mouse is held down? Currently, it only executes once per click. I am looking for a solution where the function keeps running as long as the mouse button is pressed down and stops when released.

    $('#md').mousedown(function(e){
         var pCords = e.pageY +e.pageY;
         var max = $(document).height()+$(document).width();
             var dg = 2*( pCords / max );
         $('#div').css({ 'transform':'rotate('+dg+'deg) '});
    });

javascript jquery html css

Answer 1

Answer №1

Here is a simple method to add a time delay between the execution of event handlers:

let timerId = 0;

$('#md').mousedown(function(e){
             timerId = setInterval(function() {
                         let pCords = e.pageY + e.pageY;
                         let max = $(document).height() + $(document).width();
                         let dg = 2 * (pCords / max);
                         $('#div').css({ 'transform': 'rotate(' + dg + 'deg) '});
                 }, 20); // Specify the desired time delay here
            });

$('#md').mouseup(function(e){
        clearInterval(timerId);
    });

Answer 2

Here is a simple method to add a time delay between the execution of event handlers:

let timerId = 0;

$('#md').mousedown(function(e){
             timerId = setInterval(function() {
                         let pCords = e.pageY + e.pageY;
                         let max = $(document).height() + $(document).width();
                         let dg = 2 * (pCords / max);
                         $('#div').css({ 'transform': 'rotate(' + dg + 'deg) '});
                 }, 20); // Specify the desired time delay here
            });

$('#md').mouseup(function(e){
        clearInterval(timerId);
    });

Answer 3

Answer №2

The solution to this issue can be found here: jQuery continuous mousedown

To fix this, you need to create a flag that switches to true when the first mousedown event happens. Then, you should execute a function that only stops when the flag goes back to false after the mouseup event.

Answer 4

The solution to this issue can be found here: jQuery continuous mousedown

To fix this, you need to create a flag that switches to true when the first mousedown event happens. Then, you should execute a function that only stops when the flag goes back to false after the mouseup event.

Answer 5

Answer №3

To achieve this, you can implement a basic semaphore technique. Take a look at the following code snippet:

var flag = true;

$('#md').mousedown(function() {
    flag = false;

    setTimeout(function() {
        while(!flag) {
            // Add your custom code here
        }
    }, 0);
});

$(document).mouseup(function() {
    flag = true;
});

With this approach, you can ensure smooth execution of your tasks without blocking the main process. The setTimeout function assists in creating an asynchronous flow within your code.

There might be more advanced approaches to tackle this scenario, but for now, this straightforward method should suffice. Disclaimer: I might need some coffee before exploring those options further!

Answer 6

To achieve this, you can implement a basic semaphore technique. Take a look at the following code snippet:

var flag = true;

$('#md').mousedown(function() {
    flag = false;

    setTimeout(function() {
        while(!flag) {
            // Add your custom code here
        }
    }, 0);
});

$(document).mouseup(function() {
    flag = true;
});

With this approach, you can ensure smooth execution of your tasks without blocking the main process. The setTimeout function assists in creating an asynchronous flow within your code.

There might be more advanced approaches to tackle this scenario, but for now, this straightforward method should suffice. Disclaimer: I might need some coffee before exploring those options further!

Answer 7

Answer №4

Do you think this solution could work? You can create a global boolean variable to keep track of whether the mouse is up or down, and then continuously run your function while the mouse is down on that particular element.


var isMouseUp = false;

$(document).ready(function(){
      $('#md').mousedown(function(e){
         isMouseUp = false;
         while(!isMouseUp)
        {
            // Perform desired actions
        }
    });

    $('#md').mouseup(function(e){
        isMouseUp = true;
    });
});

--edit: Don't forget to set isMouseUp to true when the mouse is lifted. Sorry about that oversight.

Answer 8

Do you think this solution could work? You can create a global boolean variable to keep track of whether the mouse is up or down, and then continuously run your function while the mouse is down on that particular element.


var isMouseUp = false;

$(document).ready(function(){
      $('#md').mousedown(function(e){
         isMouseUp = false;
         while(!isMouseUp)
        {
            // Perform desired actions
        }
    });

    $('#md').mouseup(function(e){
        isMouseUp = true;
    });
});

--edit: Don't forget to set isMouseUp to true when the mouse is lifted. Sorry about that oversight.

Answer 9

Answer №5

If you want to execute a function repeatedly every second after a mousedown event, you can utilize the setTimeout method in JavaScript. Here's an example:

 $('#md').on({
        mousedown: function () {
            $(this).data('clicked', true);
            var process = function() {
                if ($(this).data('clicked')) {
                   // Your code here
                    setTimeout(process, 1000); // Run the function every 1 second
                }
            };
            process();
        },
        mouseup: function () {
            $(this).data('clicked', false);
        }
    });

Answer 10

If you want to execute a function repeatedly every second after a mousedown event, you can utilize the setTimeout method in JavaScript. Here's an example:

 $('#md').on({
        mousedown: function () {
            $(this).data('clicked', true);
            var process = function() {
                if ($(this).data('clicked')) {
                   // Your code here
                    setTimeout(process, 1000); // Run the function every 1 second
                }
            };
            process();
        },
        mouseup: function () {
            $(this).data('clicked', false);
        }
    });

Answer 11

Answer №6

If you want, you have the option to define the handler for the mousemove event within the mousedown event and remove it in the mouseup event as shown in the following code snippet:

function movehandler(e) {
    var pCords = e.pageY + e.pageY;
    var max = $('#md').height();
    var dg = 20 * (pCords / max);
    $('#md').css({
        'transform': 'rotate(' + dg + 'deg) '
    });
}
$('#md').mousedown(function (e) {
    $('body').on('mousemove', movehandler);
});
$('#md').mouseup(function (e) {
    $('body').off('mousemove');
});
$('body').mouseleave(function (e) {
    $('body').off('mousemove');
});

Jsfiffle The example may not be perfectly written but it conveys the idea.

UPDATE: Keep in mind that $('body').on('mousemove', may not be enough depending on your specific HTML structure.

Answer 12

If you want, you have the option to define the handler for the mousemove event within the mousedown event and remove it in the mouseup event as shown in the following code snippet:

function movehandler(e) {
    var pCords = e.pageY + e.pageY;
    var max = $('#md').height();
    var dg = 20 * (pCords / max);
    $('#md').css({
        'transform': 'rotate(' + dg + 'deg) '
    });
}
$('#md').mousedown(function (e) {
    $('body').on('mousemove', movehandler);
});
$('#md').mouseup(function (e) {
    $('body').off('mousemove');
});
$('body').mouseleave(function (e) {
    $('body').off('mousemove');
});

Jsfiffle The example may not be perfectly written but it conveys the idea.

UPDATE: Keep in mind that $('body').on('mousemove', may not be enough depending on your specific HTML structure.

Keep the operation going until the mouse button is no longer pressed

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

I'm interested in querying my mongodb collection data based on a particular field

The iframe remains unresponsive and fails to resize as needed

The conversion from CSV to JSON using the parse function results in an inaccurate

Extract specific data points from external API responses on a webpage crafted in HTML

Tips for creating a CSS transition that reverses direction

When you reach a scrolling distance of over 300 vertical heights,

creating a randomized location within an HTML element using JavaScript

Using JavaScript to develop a demonstration of the capabilities of Microsoft's Cognitive

What is the best way to place a footer at the bottom of the screen using Bootstrap 5?

jQuery equivalent of this script

I have a quick and straightforward inquiry about JavaScript and the process of logging

Issue with dropdown functionality in Hartl 3rd edition chapter 8, section 2.3

Enhance the interactive experience of your website by incorporating additional questions with multiple

CSS: The relative positioned element now functions correctly with the inclusion of overflow-x

An inexplicable right margin

Problem with text alignment in Internet Explorer 7

I want to allow only numbers to be entered into a TextBox using JavaScript without the need to disable right-click

Link Tag and the Download Functionality in HTML

Ending a timer from a different function in a React component

In need of Javascript assistance for checks with if, or, and while conditions