Javascript - Need to use clearInterval outside setInterval function

Question

Basically, what I have is a setInterval inside a function. What I want to do is, control it's behavior from outside.

Here's what I have -

function wheee() {
var i = 1;

slideee = setInterval(function() {
sliderContent.style.marginLeft = margin(i);
    if(i < imagesNoOneLess) {
        i++;
    } else {
        i = 0;
    }
}, 5000); }

Now, I want to clear the interval from outside the wheee() function. How can I do that?

I also want to run the interval again, from outside. How?

score 2 · Answer 1 · answered Oct 13 '12 at 20:41

2

Well the way you've got the code now, it'll probably just work, because you didn't declare "slideee" with var.

As long as you somehow export the return value from setInterval() you're OK. You can either make that variable explicitly global (better than having it be implicit), or else have your "wheee" function return the value to its caller.

answered Oct 13 '12 at 20:41

Pointy

405,095
59
585
614

I understand what you mean.. But how can I 'export the return value from setInterval'..? I totally lost you there. – Namanyay Goel Oct 13 '12 at 20:43
@Namanyayg by "export" I just mean that you need to make sure the value is available outside the function. If you put `var slideee;` outside your function, then the variable will be available globally and you can just call `clearInterval( slideee );` – Pointy Oct 13 '12 at 20:44
As from what I've learnt, global variables are bad. Do you know any way I can avoid the use of global variables? – Namanyay Goel Oct 13 '12 at 20:46
@Namanyayg well you could have "wheee" return the value, so that when you call `wheee()` you'd save the timer id: `var timer = wheee();` and then you can call `clearInterval(timer);` – Pointy Oct 13 '12 at 20:48
Do you mean to see, if I add `return slideee` it will work? If I do `var timer = wheee();` I don't think that will work, as `wheee()` contains more things apart from the setInterval. Also, do you know of any way I can call the setInterval again, once it has been cleared? – Namanyay Goel Oct 13 '12 at 20:50
Yes you have to add a `return` statement. – Pointy Oct 13 '12 at 20:51

score 2 · Accepted Answer · answered Oct 13 '12 at 21:38

2

Global variables are not dangerous, but a pretty way of coding it if you only have one slider is to use an object literal to simulate a singleton object.

var Slider= {
    slider: null,
    Start: function(i) {
        this.slider = setInterval(function() {
            // Slider code
            console.log('running: ' + i);
            i++;
        }, 1000);
    },
    Stop: function() {
        window.clearTimeout(this.slider);
    }
};

Slider.Start(1); // Start the slider
Slider.Stop(); // Stop the slider

answered Oct 13 '12 at 21:38

Roy

428
1
3
9

Don't you mean `window.clearTimeout(this.slider)`? Edit: But anyway, this seemed like the cleanest solution to me, hence chose you correct. – Namanyay Goel Oct 14 '12 at 07:47
Good call, i forgot "this". Glad to help. – Roy Oct 17 '12 at 18:56

score 1 · Answer 3 · answered Oct 13 '12 at 20:42

1

Set the scope of slideee to be out of wheee.

Use objects in order to keep the global scope clean.

answered Oct 13 '12 at 20:42

JNF

3,696
3
31
64

And how do I do that? Sorry, I'm a newb. – Namanyay Goel Oct 13 '12 at 20:43
@Namanyayg, the way you have it now, `slideee` is global (because of no `var` declaration). Declare it within the scope you need it keeping it out of the global scope (i.e. write `var slideee;` out of the function). – JNF Oct 14 '12 at 06:15

Javascript - Need to use clearInterval outside setInterval function

3 Answers3

Linked