如何使A和B并行运行？

Question

如何使A和B并行运行？

async function runAsync(funcName)
{ 
   console.log(' Start=' + funcName.name); 
   funcName(); 
   console.log(' End===' + funcName.name) 
}; 



function A()
{
    var nowDateTime = Date.now();
    var i = 0;
    
    while( Date.now() < nowDateTime + 1000)
      i++;
   
   console.log(' A i= ' + i) ;
}

function B()
{
    var nowDateTime = Date.now();
    var i = 0;
    
    while( Date.now() < nowDateTime + 1000)
      i++;
      
   console.log(' B i= ' + i) ;
}

runAsync(A);
runAsync(B);

控制台显示A先启动，B在A之后启动：

 Start=A
 A i= 6515045
 End===A
 Start=B
 B i= 6678877
 End===B

注意：

我试图在Chrome/Firefox中使用异步，并使JS代码与IE11兼容。

此C#代码生成代理函数runAsync。

    if (isEI())
        Current.Response.Write(" function runAsync(funcName){ setImmediate(funcName); }; ");
    else
        Current.Response.Write(" async function runAsync(funcName){ funcName(); } ");

https://jsfiddle.net/NickU/n2huzfxj/28/

更新.

我的目标是解析信息并准备(索引和添加触发器)，以便在用户输入后立即响应。当用户正在查看信息时，后台函数有3-10秒的时间执行，后台函数不应该阻止UI、鼠标和键盘响应。以下是所有浏览器的解决方案，包括IE11。

创建了一个新的插件来模拟空闲期间funcRun的并行执行。

原始代码的示例：

 $("input[name$='xxx'],...").each( function(){runForThis(this)}, ticksToRun );

使用Plugin：：更新代码

  $(document).zParallel({
        name: "Example",
        selectorToRun: "input[name$='xxx'],...",
        funcRun: runForThis
    });

插件.

(function ($)
{
// Plugin zParallel

    function zParallel(options)
    {
        var self = this;

        self.defaults = {
            selectorToRun: null,
            funcRun: null,
            afterEnd: null,
            lengthToRun: 0,
            iterScheduled: 0,
            ticksToRun: 50,
            showDebugInfo: true
        };

        self.opts = $.extend({}, self.defaults, options);
    }

    zParallel.prototype = {

        init: function ()
        {
            var self = this;

            var selector = $(self.opts.selectorToRun);
            self.lengthToRun = selector.length;

            if (self.lengthToRun > 0)
            {
                self.arrayOfThis = new Array;
                selector.each(function ()
                {
                    self.arrayOfThis.push(this);
                });
                self.arrayOfThis.reverse();
                self.opts.iterScheduled = 0;
                self.whenStarted = Date.now();
                self.run();
                return true;
            }
            else
            {
                this.out('zParallel: selector is empty');
                return false;
            }
        },

        run: function () 
        {
            var self = this;
            var nextTicks = Date.now() + self.opts.ticksToRun;
            var _debug = self.opts.showDebugInfo;

            if (self.opts.iterScheduled === 0)
            {
                nextTicks -= (self.opts.ticksToRun + 1);   // Goto to Scheduling run
            }

            var count = 0;
            var comOut = "";
            while ((self.lengthToRun = self.arrayOfThis.length) > 0)
            {
                var curTicks = Date.now();

                if (_debug)
                {
                    comOut = self.opts.name + " |" + (curTicks - self.whenStarted)/1000 + "s| ";
                    if (self.opts.iterScheduled === 0)
                        this.out("START " + comOut + " remaining #" + self.lengthToRun);
                }

                if (curTicks > nextTicks)
                {
                    self.opts.iterScheduled++;

                    if ('requestIdleCallback' in window)
                    {
                        if (_debug)
                            this.out(comOut + "requestIdleCallback , remaining #" + self.lengthToRun + " executed: #" + count);
                        window.requestIdleCallback(function () { self.run() }, { timeout: 1000 });
                    } else
                    {
                        if (_debug)
                            this.out(comOut + "setTimeout, remaining #" + self.lengthToRun + " executed: #" + count);
                        setTimeout(function (self) { self.run()}, 10, self);
                    }
                    return true;
                }

                var nexThis = self.arrayOfThis.pop();
                self.opts.funcRun(nexThis);
                count++;
            }

            if (self.opts.afterEnd!== null)
               self.opts.afterEnd();

            if (_debug)
                this.out("END " + comOut + " executed:  #" + count);

            return true;
        },
        out: function (str)
        {
            if (typeof console !== 'undefined')
                console.log(str);
        }
    };


    $.fn.zParallel = function (options)
    {
        var rev = new zParallel(options);
        rev.init();
    };
})(jQuery);

// 示例.

(function ($)
{

    var tab1 = $('#tbl1');
    for (i = 0; i < 1000; i++)
        $("<tr>"+
        "<td>#" + i + "</td>"+
        "<td><input id='a_" + i + "' value='" + i + "' >"+
        "</td><td><input id='b_" + i + "' value='" + i + "' ></td></tr>")
            .appendTo(tab1);

    $(document).zParallel({
        name: "A",
        selectorToRun: "input[id^='a_']",
        funcRun: function (nextThis)
        {
            var $this = $(nextThis);

            var nowDateTime = Date.now();
            var i = 0;
            while( Date.now() < nowDateTime + 2)
                  i++;

            $this.val( i );
            if (i > 100)
                $this.css('color', 'green').css('font-weight', 'bold');
            else
                $this.css('color', 'blue');
        }
    });


    $(document).zParallel({
        name: "B",
        selectorToRun: "input[id^='b_']",
        funcRun: function (nextThis)
        {
            var $this = $(nextThis);

            var nowDateTime = Date.now();
            var i = 0;
            while( Date.now() < nowDateTime + 2)
                  i++;

            $this.val( i );
            
            if (i > 100)
                $this.css('background', '#BBFFBB');
            else
                $this.css('background', '#FFBBBB');
        }
    });

})(jQuery);

https://jsfiddle.net/NickU/1xt8L7co/59/

Answer 1

这两个示例函数只是在同一个“线程”上一个又一个地同步执行(JS实际上只有一个线程可供此类脚本使用)。

在这里，async的使用是不相关的，因为函数A中没有真正的异步操作--它只是一个繁忙的while循环--所以在执行可以转移到其他任何东西之前，它已经完全完成了。

如果函数A已经调用了实际的异步操作(例如HTTP请求--而不仅仅是包装在async函数中的同步操作)，那么函数B可能有机会启动(在这种情况下，B将在执行返回到A之前完全完成，因为B也只包含一个同步的、繁忙的时间循环)。

并行处理可以通过WebWorkers实现，它允许在后台线程(实际独立的线程)上运行。