使用console.log输出奇怪的输出（5）

Question

I have the simplest chrome extension which contains a content javascript (nothing else):

script="\
c=0;\
(function f() {\
    if (++c>20) return;\
    console.log(5);\
    setTimeout(f, 500);\
})();\
";
scriptBlock = document.createElement('script');
scriptBlock.type = 'text/javascript';
scriptBlock.appendChild(document.createTextNode(script));
document.getElementsByTagName('head')[0].appendChild(scriptBlock);

This simply injects a small piece of js into the head element. In mail.google.com, the console output is 4 fives followed by sixteen Resource interpreted as Other but transferred with MIME type undefined. Every other site displays simply 20 fives.

Can anyone explain this behaviour please?

Answer 1

You are using a global variable in your script. If a script in the page uses a global variable with the same name, it will change the value in the variable, and your script will show that value instead.

Answer 2

As @Guffa said, your global variable may be overwritten. Including it inside the closure will ensure it will be accessed by your code only.

(function () {
    var c = 0;

    setTimeout(function f() {
        if (++c > 20) return;

        console.log(5);

        setTimeout(f, 500);
    }, 500);
}());