Looping something while holding down the mouse

Question

I want the numbers to increase every 100ms while holding down the mouse. What am I doing wrong?

var i = 1;
$("#plus1").mousedown(function () {
    loopthis = setinterval(repeatingfunction(), 100);
}).mouseup(function () {
    clearInterval(loopthis);
});

function repeatingfunction() {
    $("#testarea").append(i);
    i = i + 1;
}

It's `setInterval` not `setinterval` – Ian Brindley Sep 17 '13 at 09:19 — Ian Brindley, Sep 17 '13 at 09:19
for starters it's setInterval – Patsy Issa Sep 17 '13 at 09:20 — Patsy Issa, Sep 17 '13 at 09:20

score 3 · Answer 1 · answered Sep 17 '13 at 09:20

You're calling the function rather than assigning a reference to it when calling setInterval (you also missed the uppercase I). This:

loopthis = setinterval(repeatingfunction(), 100);

should be:

loopthis = setInterval(repeatingfunction, 100);

In your original code it's immediately executing repeatingfunction (because that's what () does), then passing the value returned by that function (nothing) to be executed when the interval is up.

score 2 · Answer 2 · answered Sep 17 '13 at 09:20

It´s spelled setInterval, you also invoke the repeatingfunction before setInterval is running. I dont think you want to append a new textnode but replacing the old value with the new:

var i = 1, loopthis;
$("#plus1").mousedown(function () {
    loopthis = setInterval(repeatingfunction, 100);
}).mouseup(function () {
    clearInterval(loopthis);
});

function repeatingfunction() {
    $("#testarea").text(i);
    i = i + 1;
}

Example

score 2 · Answer 3 · answered Sep 17 '13 at 09:20

2

big I on setInterval and repeatingfunction should not have () after it

loopthis = setInterval(repeatingfunction, 100); //notice setInterval and repeatingfunction()

DEMO

answered Sep 17 '13 at 09:20

Anton

32,245
5
44
54

score 2 · Answer 4 · answered Sep 17 '13 at 09:22

2

Live Demo

var i = 1;
$("#plus1").mousedown(function () {
    loopthis = setInterval(repeatingfunction, 100);
}).mouseup(function () {
    clearInterval(loopthis);
});

function repeatingfunction() {
    $("#testarea").append(i);
    i = i + 1;
}

answered Sep 17 '13 at 09:22

Dipesh Parmar

27,090
8
61
90

The only thing I can see is that the numbers are being appended to `testarea`. `.text()` looks much nicer :) [see](http://jsfiddle.net/U9v2H/18/) – Ian Brindley Sep 17 '13 at 09:24

score 1 · Answer 5 · answered Sep 17 '13 at 09:21

The scope of loopthis needs to be global since it was undefined within the mouseup event handler. setinterval needed to be changed to setInterval and passed an anonymous function. Also instead of appending the value of i change the html of the div.

Javascript

var i = 1;
var loopthis = {};
$("#plus1").mousedown(function () {
    loopthis = setInterval(function(){repeatingfunction()}, 100);
}).mouseup(function () {
    clearInterval(loopthis);
});

function repeatingfunction() {
    $("#testarea").html(i);
    i = i + 1;
}

JS Fiddle: http://jsfiddle.net/U9v2H/16/

score 1 · Answer 6 · answered Sep 17 '13 at 09:28

There are two issues with your javascript code.

1) setinterval shouold be setInterval

2) loopthis = setInterval(repeatingfunction(), 100); should be loopthis = setInterval(repeatingfunction, 100);

Note the () in repeatingfunction() are not required.

Here is the jsfiddle

Looping something while holding down the mouse

6 Answers6