Grow your CSS skills. Land your dream job.

jQuery plugin callback and ‘this’

  • # April 8, 2013 at 5:11 pm

    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

    # April 8, 2013 at 5:58 pm

    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.

    # April 8, 2013 at 6:19 pm

    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.

    # April 8, 2013 at 6:34 pm

    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.

    # April 8, 2013 at 6:42 pm

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

    All the best, Dave

    # April 8, 2013 at 6:47 pm

    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!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".