Stop page execution like the alert() function

后端 未结 7 1715
花落未央
花落未央 2020-11-28 10:37

When I write alert(\'Hello\'), the page execution stops and waits for approval to continue.

I have a div setup to display as a fake alert, usi

相关标签:
7条回答
  • 2020-11-28 11:03

    Yes it's possible, i did inaccurate and not very well tested demo which does this.

    Main concept:

    1. in this example we have method Login.Try() which is executing Login.Proceed() method. Login.Proceed() makes AJAX query and we would like to wait for its execution, but don't want bind any handlers (just wait for it as window.alert() does)
    2. instead of direct function's execution Login.Proceed, we use async() and await() methods (like in C#)
    3. when we need to "pause" script and wait for something, we stop method execution using throw, and parse caller's function, to run its second part when waited (async) method has completed its execution.

    What was left out of scope:

    1. Clean code
    2. Test solution for different browsers
    3. Save/Restore local variables
    4. Not works for loops.

    Demo:

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
    <script>
    
    Login.Try(); // START!! START!! START!!
    
    var Login = {
        Url: "http://xxxx",
        Try: async(this, function (T) {
    
            console.log('before login');
    
            //var success = call(this, Login.Proceed); // normal call
            var success = await(this, Login.Proceed);  // that we want!
    
            console.log('after login');
            console.log('success ' + success);
    
        }),
    
        Proceed: function (callback) {
            console.log('before ajax');
            $.ajax({
                url: this.Url,
                context: document.body
            }).done(function () {
                console.log('after ajax');
                callback("role=admin");
            });
        }
    }
    
    
    function async(T, method){
       console.log('before async create');
       return function () { return method.apply(T); };
       console.log('after async create');
    };
    
    function await(T, method) {
        var fn = arguments.callee.caller.toString();
        var pos = fn.indexOf('await(');
        var allBeforeAwait = fn.substring(0, pos);
    
        var pos1 = fn.indexOf('await(');
        pos1 = fn.indexOf(',', pos1) + 1;
        var pos2 = fn.indexOf(')', pos1);
        var cc = fn.substring(pos1, pos2);
    
    
        pos = allBeforeAwait.lastIndexOf(';');
        var allBeforeCall = allBeforeAwait.substring(0, pos + 1) + "}";
        var callResult = allBeforeAwait.substring(pos + 1);
    
        var result = 10;
        var allAfterCall = "("+fn.substring(0, fn.indexOf(")")) + ",V){" + callResult + "V;";
        pos = fn.indexOf(')', pos) + 2;
        allAfterCall = allAfterCall + fn.substring(pos)+")";
    
        //uncomment to see function's parts after split
        //console.debug(allBeforeCall);
        //console.debug(cc);
        //console.debug(allAfterCall);
    
        method.apply(T, [function (value) {
            console.log('ajax response ' + value);
            eval(allAfterCall).apply(T, [T, value]);
        } ]);
    
        throw "";
    };
    
    </script>
    

    Hope this demo will inspire you with some ideas.

    Also, you can take a look on http://blogs.msdn.com/b/rbuckton/archive/2011/08/15/promise-js-2-0-promise-framework-for-javascript.aspx

    0 讨论(0)
提交回复
热议问题