CODEWITHSUNDEEP
javascriptgoogle-chrome
Adam Baranyai
Adam Baranyai

Reputation: 3867

Strange javascript behaviour, what could be happening here?

Consider the following javascript function:

function bs_animate_percentage(elem,style,unit,from,to,time) {
    if(!elem) return;

    console.log("first elem", elem);
    var start = new Date().getTime(),
        timer = setInterval(function() {
            console.log("second elem", elem);
            console.log("time", time);
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if(step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

This function should animate a loading bar, it was taken from another stackOverflow question. I wanted to add a text change to the animation also, for which I need the parent of the initial element.

When I run this function, with the following parameters, the console logs the following values:

    bs_animate_percentage(document.getElementById("progress-bar"), 'width', '%', 0, 100, 60000);

    *** LOGS ***
    "first elem", <div....> (the selected div)
    "second elem", undefiend
    "time", 600000

Basically, inside the main function, elem is known and has the value which is expected. But inside the anonymous function, elem is logged out as undefined, if I try to fetch it's parent, it is undefined also, yet, the style attribute works as expected, as in, the width of the elem is changing. I've experienced this in chrome, what could be the problem here?

EDIT: I've also checked in Firefox, but strangely, there the correct results are passed back in the second console log. This must be something Chrome specific, but I don't know what...

EDIT2: What is more strange, when trying to replicate this behaviour in jsfiddle, it doesn't persist, neither in Chrome nor Firefox. Where should I look for the problem then?

Upvotes: 1

Views: 48

Answers (1)

user1615664
user1615664

Reputation: 621

I am pretty sure the elem variable is unset during that period. And my prediction is it may sometimes pass. One of the ways to verify this would be as follows:

function bs_animate_percentage(elem,style,unit,from,to,time) {
    if(!elem) return;

    console.log("first elem", elem);
    var x = elem.cloneNode(true);
    var start = new Date().getTime(),
        timer = setInterval(function() {
            console.log("second elem", x);
            console.log("time", time);
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if(step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

I am sure this will be fine. And it will confirm your problem. And next would be how to solve it. Is elem a dom element or some other element? Is it being modified in chrome? THe better way would be to give this elem an id and later fetch it by the id and set its style as follows, Just only if you do not wish to debug the issue in your code.

function bs_animate_percentage(elem,style,unit,from,to,time) {
        if(!elem) return;

        console.log("first elem", elem);
        var x = elem.cloneNode(true).id;
        var start = new Date().getTime(),
            timer = setInterval(function() {
                // Or some similar logic
                x = document.getElementById(x);
                console.log("second elem", x);
                console.log("time", time);
                var step = Math.min(1,(new Date().getTime()-start)/time);
                elem.style[style] = (from+step*(to-from))+unit;
                if(step == 1) clearInterval(timer);
            },25);
        elem.style[style] = from+unit;
    }

Upvotes: 1

Related Questions