How to stop executing Javascript function containing infinite loop after some time

Question

Suppose I have following piece of code that contains an infinite loop:

function infiniteLoop() {
    while(true) {
        //do something, eg.
        document.getElementById("someID").innerHTML = "Blah";
    }
}

If we execute this code in an online compiler, browser will crash. I want to prevent that from happening. So I tried following code following this answer:

function willNotCrash() {
    myVar = setInterval(infiniteLoop, 5000);
    setTimeout(function(){
        clearInterval(myVar);
    }, 4000);
}

This code doesn't make the browser to crash, because I am stopping the execution before infiniteLoop() gets called by clearInterval(myVar).

My question is how do I stop executing such functions if they don't response within some period of time (eg. after 5 seconds or before the browser is crashed).

For example, if we copy paste following java code in https://www.compilejava.net/

public class HelloWorld {
    public static void main(String[] args) {
        while(true) {
            System.out.println("Blah");
        }
    }
}

we get a nice output saying,

Script was taking longer than 5 seconds to execute so it was killed.

Here is my current code: http://js.do/code/106546

Answer 1

I found exactly what I was looking for in Bergi's comment,

Alternatively, place a if (Date.now() > dateAtStartOfExecution+5000) return; in every loop body.

So now my code looks like:

function infiniteLoop() {
    dateAtStartOfExecution = Date.now();
    while(true) {
        //do something
        document.getElementById("someID").innerHTML = "Blah";
        if (Date.now() > dateAtStartOfExecution+5000) {
            alert("Taking too much time. Killing.");
            return;
        }
    }
}

If I run this code after 5 seconds I will get an alert and the execution will stop. Try this: http://js.do/code/106565

Answer 2

Typically all JavaScript runs in one thread, so it is impossible to run any JavaScript that could stop your loop while your loop is running. Using HTML5 web workers, you can run the infinite loop in a separate thread, and then you can terminate it:

var myWorker = new Worker( '/infinite.js ');
setTimeout( function ( ) {
    myWorker.terminate( );
}, 5000 );

However your web worker won't have access to the DOM, so the contents of your infinite loop would need to be different that what you have in your question.

Answer 3

This is a bit tricky but perfectly doable. You need to tokenize the script and then rebuild it but insert a counter increment in every loop and function call. If the counter goes above some threshold, then bomb out. I did it here: https://littleminigames.com/

You can see the source at https://bitbucket.org/cskilbeck/littleminigames/src

The interesting bits are in wrapper.js (https://bitbucket.org/cskilbeck/littleminigames/src/ac29d0d0787abe93c75b88520050a6792c04d34d/public_html/static/js/wrapper.js?at=master&fileviewer=file-view-default)

Google escodegen, estraverse and esprima

I relied heavily on this: https://github.com/CodeCosmos/codecosmos/blob/master/www/js/sandbox.js

wrapper.js, as requested:

// Don't obfuscate this file! We depend on the toString() of functions!
// this was all nicked from https://github.com/CodeCosmos/codecosmos/blob/master/www/js/sandbox.js

(function(mainApp) {

    'use strict';
    var esprima = window.esprima,
        estraverse = window.estraverse,
        escodegen = window.escodegen,
        errors = [],
        eng,
        Syntax = estraverse.Syntax;

    // This implements the jankiest possible "source map", where we keep an array
    // of [generatedLine, knownSourceLine]. Seems to essentially work.
    function SourceNode(line, col, _sourceMap, generated) {
        this.line = line;
        this.col = col;
        this.generated = generated;
    }

    SourceNode.prototype.toStringWithSourceMap = function toStringWithSourceMap() {
        var code = [];
        var mapLines = {};
        var map = [];
        // assumes that wrapCode adds two lines
        var line = 3;
        var lastMapLine = null;

        function walk(node) {
            if (typeof(node) === "string") {
                if (node) {
                    code.push(node);
                    var matches = node.match(/\n/g);
                    if (matches !== null) {
                        line += matches.length;
                    }
                }
            } else if (node instanceof SourceNode) {
                if (node.line !== null) {
                    if (!mapLines[line]) {
                        map.push([line, node.line]);
                        mapLines[line] = node.line;
                    }
                }
                walk(node.generated);
            } else {
                node.forEach(walk);
            }
        }
        walk(this);
        return {
            code: code.join(''),
            map: map
        };
    };

    SourceNode.prototype.toString = function toString() {
        return this.toStringWithSourceMap().code;
    };

    // This is used by escodegen
    window.sourceMap = {
        SourceNode: SourceNode
    };

    // TODO (chs): add in all the things that need to be masked
    function runWrapper($userCode, __sys) {
        var clear = __sys.clear,
            setpixel = __sys.setpixel,
            rectangle = __sys.rectangle,
            box = __sys.box,
            line = __sys.line,
            getpixel = __sys.getpixel,
            getpixeli = __sys.getpixeli,
            keypress = __sys.keypress,
            keyrelease = __sys.keyrelease,
            keyheld = __sys.keyheld,
            reset = __sys.reset;
        __sys.userFunction = __sys.catchErrors($userCode);
    }

    function extractCode(fn) {
        var code = fn.toString();
        return code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));
    }

    function makeOneLine(code) {
        return code.replace(/(\/\/[^\n]+|\n\s|\r\n\s*)/g, '');
    }

    var runTemplate = makeOneLine(extractCode(runWrapper));

    function wrapCode(code, template, functionName, postCode) {
        // avoid interpretation of the replacement string by using a fun.
        // otherwise mo' $ mo problems.
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter
        return ("'use strict';" + template.replace(/\$userCode/, function() {
            return 'function ' + functionName + '() {\n' + code + postCode + '\n}';
        }));
    }

    var injectStatement = esprima.parse("if (++__sys.ctr >= __sys.maxctr) throw new Error('Script halted - infinite loop?');").body[0];
    var injectElseStatement = esprima.parse("if (++__sys.ctr >= __sys.maxctr) throw new Error('Script halted - infinite loop?'); else ;").body[0];

    function CallExpression(callee, args) {
        this.callee = callee;
        this.arguments = args;
    }
    CallExpression.prototype.type = Syntax.CallExpression;

    function Identifier(name) {
        this.name = name;
    }
    Identifier.prototype.type = Syntax.Identifier;

    function BlockStatement(body) {
        this.body = body;
    }
    BlockStatement.prototype.type = Syntax.BlockStatement;

    function ReturnStatement(argument) {
        this.argument = argument;
    }
    ReturnStatement.prototype.type = Syntax.ReturnStatement;

    function FunctionExpression(id, params, body) {
        this.id = id;
        this.params = params;
        this.body = body;
        this.defaults = [];
        this.expression = false;
        this.generator = false;
        this.rest = null;
    }
    FunctionExpression.prototype.type = Syntax.FunctionExpression;

    function wrapId(node, defaultName) {
        if (node.loc) {
            var id = (node.id || {
                name: null,
                loc: null
            });
            var loc = id.loc || node.loc;
            var name = id.name || defaultName;
            return new Identifier(name + '$' + loc.start.line);
        } else {
            return node.id;
        }
    }

    function instrumentAST(ast) {
        var identifierStack = [];

        function pushIdentifier(s) {
            identifierStack[identifierStack.length - 1].push(s);
        }

        function popIdentifierStack() {
            identifierStack.pop();
        }

        function pushIdentifierStack() {
            identifierStack.push([]);
        }

        function peekLastIdentifier() {
            var lastStackIdx = identifierStack.length - 1;
            if (lastStackIdx >= 0) {
                var stack = identifierStack[lastStackIdx];
                if (stack.length) {
                    return stack[stack.length - 1];
                }
            }
            return '';
        }
        pushIdentifierStack();
        return estraverse.replace(ast, {
            enter: function enterAST(node) {
                switch (node.type) {
                    case Syntax.VariableDeclarator:
                        if (node.id.type === Syntax.Identifier) {
                            pushIdentifier(node.id.name);
                        }
                        break;
                    case Syntax.MemberExpression:
                        if (node.object.type === Syntax.Identifier) {
                            var id = node.object.name;
                            if (node.property.type === Syntax.Identifier) {
                                id += '__dot__' + node.property.name;       // huh? why mangle these?
                                // console.log(id);
                            }
                            pushIdentifier(id);
                        } else if (node.property.type === Syntax.Identifier) {
                            pushIdentifier(node.property.name);
                        }
                        break;
                    case Syntax.FunctionDeclaration:
                        pushIdentifierStack();
                        break;
                    case Syntax.FunctionExpression:
                        pushIdentifierStack();
                        break;
                    default:
                        break;
                }
                return node;
            },
            leave: function leaveAST(node) {
                switch (node.type) {
                    case Syntax.DoWhileStatement:
                        break;
                    case Syntax.ForStatement:
                        break;
                    case Syntax.FunctionDeclaration:
                        break;
                    case Syntax.FunctionExpression:
                        break;
                    case Syntax.WhileStatement:
                        break;
                    default:
                        return estraverse.SKIP;
                }
                // modify the BlockStatement in-place to inject the instruction counter

                if(node.body.body === undefined) {
                    // they have used a non-block statement as the body of a function or loop construct

                    // not allowed for function declarations - should never get here
                    if(node.type === Syntax.FunctionDeclaration) {
                        errors.push({
                            message: "Missing {",
                            line: node.loc.start.line,
                            column: node.loc.start.column
                        });
                    }
                    else {
                        // otherwise insert the test
                        var newBody = angular.copy(injectElseStatement);
                        newBody.alternate = node.body;
                        node.body = newBody;
                    }
                    return estraverse.SKIP;
                }

                node.body.body.unshift(injectStatement);
                if (node.type === Syntax.FunctionExpression) {
                    popIdentifierStack();
                    // __catchErrors(node)
                    node.id = wrapId(node, peekLastIdentifier());
                    return new CallExpression(
                        new Identifier("__sys.catchErrors"), [node]);
                }
                if (node.type === Syntax.FunctionDeclaration) {
                    popIdentifierStack();
                    // modify the BlockStatement in-place to be
                    // return __catchErrors(function id() { body });
                    var funBody = node.body;
                    node.body = new BlockStatement([
                        new ReturnStatement(
                            new CallExpression(
                                new CallExpression(
                                    new Identifier("__sys.catchErrors"), [new FunctionExpression(
                                        wrapId(node, peekLastIdentifier()), [],
                                        funBody)]), []))
                    ]);
                }
                return node;
            }
        });
    }

    // mainApp.sandbox('var a = 1; function update(frame) { clear(0); }').code

    // give it the source code as a string
    mainApp.sandbox = function(code) {
        var rc = {};
        this.errors = [];
        try {
            this.ast = instrumentAST(esprima.parse(code, { range: true, loc: true }));
            this.map = escodegen.generate(this.ast, { sourceMap: true, sourceMapWithCode: true });
            this.code = wrapCode(this.map.code, runTemplate, '', ';\n__sys.updateFunction = (typeof update === "function") ? update : null;');
        }
        catch(e) {
            this.errors.push({
                message: e.description,
                line: e.lineNumber,
                column: e.column
            });
        }
        if(this.code) {
            this.code = "eng.clientFunction = function(__sys) {" + this.code + "};";
        }
    };

    mainApp.sandbox.prototype.searchMap = function(needle) {
        // binary search
        var lo = 0;
        var hi = this.map.map.length;
        var mid, here;
        while (true) {
            mid = lo + ((hi - lo) >> 1);
            here = this.map.map[mid];
            if (mid === lo || here[0] === needle) {
                return here[1];
            } else if (here[0] > needle) {
                hi = mid;
            } else {
                lo = mid;
            }
        }
    };

})(mainApp);