jQuery plugin callback and ‘this’

[sheepysheep60]

Hi!

So I made a plugin which counts from 0 to _whatever number is in the div its called on_

The thing is, I added a callback function so once one div counts up to the desired number, it can start on another div. Then it gets weird:

http://codepen.io/sheepysheep60/pen/jxudC

It resets the current div’s number, then continues on with the next div. Without this callback everything works fine.

The final screen after some ticking, should look like this:

10
10
10

Instead it looks like this:

1
1
10

How come its doing this? Its driving me mad! Any advice or forks most welcome. Thanks, Dave

[theacefes]

im getting 10, 10, 10.

EDIT: Okay so on FF it doesn’t work at all. And yes, on Chrome it’s showing your error.

[CrocoDillon]

You can start by not adding vars to global scope:

var current_number = settings.startFrom;

This does fix the problem but the real issue is the timer that seems to ignore `clearTimeout`

console.log(timer + ‘: target = ‘ + settings.target.attr(‘id’) + ‘, number = ‘ + current_number);
settings.target.html(current_number);

If you log that you can see the timer keeps running, or at least it seems to.

[CrocoDillon]

Okay clearing the timeout has no use because the timeout already fired if you’re inside the checkNumber function, that’s why that doesn’t work. What you want to do is return from the function after calling the `onFinished`

if (typeof settings.onFinished == ‘function’) {
settings.onFinished();
}
return;

remove the `clearTimeout` as it really does nothing (you might as well remove the `timer` variable), and add `var` keywords to your `offset` and `current_number` variables to keep them in function scope.

EDIT:

Actually that brings another problem, if the count to isn’t dividable by offset (for example count from 0 to any uneven number, with jump = 2), because this never gets printed:

if(current_number >= settings.countTo) {
current_number = settings.countTo;

Solution is to do the counting up before that if:

current_number += offset;
if(current_number >= settings.countTo) {
current_number = settings.countTo;

instead of inside the else where you create the timeout.

[sheepysheep60]

@CrocoDillon ahhh man, thank you so so much, you nailed it.

All the best, Dave

[CrocoDillon]

Reduced function (only positive offset):

function checkNumber(){
current_number += offset;
if(current_number >= settings.countTo) {
current_number = settings.countTo;
if (typeof settings.onFinished == ‘function’) {
settings.onFinished();
}
} else {
timer=window.setTimeout(function(){checkNumber()},settings.frequency);
}
settings.target.html(current_number);
}

EDIT: Aaah you got it already :) cheers!

[Author]

Posts