Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery plugin callback and ‘this’

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43968
    sheepysheep60
    Participant

    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

    #131066
    theacefes
    Member

    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.

    #131068
    CrocoDillon
    Participant

    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.

    #131069
    CrocoDillon
    Participant

    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.

    #131071
    sheepysheep60
    Participant

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

    All the best, Dave

    #131072
    CrocoDillon
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.