5

这是我在 stackoverflow 上的第一篇文章，所以如果我遇到一个彻头彻尾的傻瓜或者我无法让自己完全清楚，请不要对我太猛烈抨击。:-)

这是我的问题：我正在尝试编写一个 javascript 函数，通过检查第一个函数的完成然后执行第二个函数来将两个函数“绑定”到另一个函数。

显然，解决这个问题的简单方法是编写一个元函数，在其范围内调用这两个函数。但是，如果第一个函数是异步的（特别是 AJAX 调用），而第二个函数需要第一个函数的结果数据，那根本行不通。

我对解决方案的想法是给第一个函数一个“标志”，即一旦调用它就创建一个公共属性“this.trigger”（初始化为“0”，完成后设置为“1”）；这样做应该可以让另一个函数检查标志的值（[0,1]）。如果满足条件（“trigger == 1”），则应调用第二个函数。

以下是我用于测试的抽象示例代码：

<script type="text/javascript" >

/**/function cllFnc(tgt) { //!! first function

    this.trigger = 0 ;
    var trigger = this.trigger ;

    var _tgt = document.getElementById(tgt) ; //!! changes the color of the target div to signalize the function's execution
        _tgt.style.background = '#66f' ;

    alert('Calling! ...') ;

    setTimeout(function() { //!! in place of an AJAX call, duration 5000ms

            trigger = 1 ;

    },5000) ;

}

/**/function rcvFnc(tgt) { //!! second function that should get called upon the first function's completion

    var _tgt = document.getElementById(tgt) ; //!! changes color of the target div to signalize the function's execution
        _tgt.style.background = '#f63' ;

    alert('... Someone picked up!') ;

}

/**/function callCheck(obj) {   

            //alert(obj.trigger ) ;      //!! correctly returns initial "0"                         

    if(obj.trigger == 1) {              //!! here's the problem: trigger never receives change from function on success and thus function two never fires 

                        alert('trigger is one') ;
                        return true ;
                    } else if(obj.trigger == 0) {
                        return false ;
                    }


}

/**/function tieExc(fncA,fncB,prms) {

        if(fncA == 'cllFnc') {
            var objA = new cllFnc(prms) ;   
            alert(typeof objA + '\n' + objA.trigger) ;  //!! returns expected values "object" and "0"
        } 

        //room for more case definitions

    var myItv = window.setInterval(function() {

        document.getElementById(prms).innerHTML = new Date() ; //!! displays date in target div to signalize the interval increments


        var myCallCheck = new callCheck(objA) ; 

            if( myCallCheck == true ) { 

                    if(fncB == 'rcvFnc') {
                        var objB = new rcvFnc(prms) ;
                    }

                    //room for more case definitions

                    window.clearInterval(myItv) ;

            } else if( myCallCheck == false ) {
                return ;
            }

    },500) ;

}

</script>

用于测试的 HTML 部分：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd >

<html>

<head>

    <script type="text/javascript" >
       <!-- see above -->
    </script>

    <title>

      Test page

    </title>


</head>

<body>

    <!-- !! testing area -->

        <div id='target' style='float:left ; height:6em ; width:8em ; padding:0.1em 0 0 0; font-size:5em ; text-align:center ; font-weight:bold ; color:#eee ; background:#fff;border:0.1em solid #555 ; -webkit-border-radius:0.5em ;' >
            Test Div
        </div>

        <div style="float:left;" >
            <input type="button" value="tie calls" onmousedown="tieExc('cllFnc','rcvFnc','target') ;" />
        </div>

<body>


</html>

我很确定这是javascript范围的一些问题，因为我已经检查了触发器是否正确设置为“1”并且确实如此。“checkCall()”函数很可能没有接收到更新的对象，而是只检查它的旧实例，显然不会通过将“this.trigger”设置为“1”来标记完成。如果是这样，我不知道如何解决这个问题。

无论如何，希望有人对这种特殊问题有想法或经验。

谢谢阅读！

FK

4

5 回答 5

8

您可以利用 JS 的一个称为闭包的特性。将它与一种非常常见的 JS 模式相结合，称为“持续传递样式”，您就有了解决方案。（这些东西都不是 JS 的原创，但在 JS 中被大量使用）。

// a function
function foo(some_input_for_foo, callback)
{
    // do some stuff to get results

    callback(results); // call our callback when finished
}

// same again
function bar(some_input_for_bar, callback)
{
    // do some stuff to get results

    callback(results); // call our callback when finished
}

“延续传递风格”是指回调。每个函数不是返回一个值，而是调用一个回调（延续）并给它结果。

然后，您可以轻松地将两者联系在一起：

foo(input1, function(results1) {

    bar(results1, function(results2) {

        alert(results2);
    });
});

嵌套的匿名函数可以从它们所在的范围内“看到”变量。因此无需使用特殊属性来传递信息。

更新

为了澄清，在您的问题的代码片段中，很明显您的想法大致是这样的：

我有一个长时间运行的异步操作，所以我需要知道它何时完成才能开始下一个操作。所以我需要使该状态作为属性可见。然后在其他地方我可以循环运行，反复检查该属性以查看它何时更改为“完成”状态，因此我知道何时继续。

（然后作为一个复杂的因素，循环必须用于setInterval开始运行和clearInterval退出，以允许其他 JS 代码运行 - 但它基本上是一个“轮询循环”）。

你不需要这样做！

不要让你的第一个函数在完成时设置一个属性，而是让它调用一个函数。

为了清楚地说明这一点，让我们重构您的原始代码：

function cllFnc(tgt) { //!! first function

    this.trigger = 0 ;
    var trigger = this.trigger ;

    var _tgt = document.getElementById(tgt) ; //!! changes the color...
    _tgt.style.background = '#66f' ;

    alert('Calling! ...') ;

    setTimeout(function() { //!! in place of an AJAX call, duration 5000ms

        trigger = 1 ;

    },5000) ;
}

[更新2：顺便说一句，那里有一个错误。您将属性的当前值复制trigger到一个名为 的新局部变量trigger中。然后最后将 1 分配给该局部变量。没有其他人能够看到这一点。局部变量是函数私有的。但无论如何你都不需要这样做，所以请继续阅读...... ]

我们所要做的就是告诉该函数在完成后调用什么，并摆脱属性设置：

function cllFnc(tgt, finishedFunction) { //!! first function

    var _tgt = document.getElementById(tgt) ; //!! changes the color...
    _tgt.style.background = '#66f' ;

    alert('Calling! ...') ;

    setTimeout(function() { //!! in place of an AJAX call, duration 5000ms

        finishedFunction(); // <-------- call function instead of set property

    },5000) ;
}

现在不需要您的“电话检查”或您的特殊tieExc助手。只需很少的代码，您就可以轻松地将两个函数绑定在一起。

var mySpan = "#myspan";

cllFnc(mySpan, function() { rcvFnc(mySpan); });

这样做的另一个好处是我们可以将不同的参数传递给第二个函数。使用您的方法，将相同的参数传递给两者。

例如，第一个函数可能会调用 AJAX 服务（为简洁起见使用 jQuery）：

function getCustomerBillAmount(name, callback) {

    $.get("/ajax/getCustomerIdByName/" + name, function(id) {

        $.get("/ajax/getCustomerBillAmountById/" + id), callback);

    });
}

这里，callback接受客户账单金额，AJAXget调用将接收到的值传递给我们传递的函数，因此callback已经兼容，因此可以直接作为第二次 AJAX 调用的回调。因此，这本身就是将两个异步调用按顺序捆绑在一起并将它们包装在（从外部）看起来是单个异步函数的示例。

然后我们可以将它与另一个操作链接起来：

function displayBillAmount(amount) {

    $("#billAmount").text(amount); 
}

getCustomerBillAmount("Simpson, Homer J.", displayBillAmount);

或者我们可以（再次）使用匿名函数：

getCustomerBillAmount("Simpson, Homer J.", function(amount) {

    $("#billAmount").text(amount); 
});

因此，通过像这样链接函数调用，每个步骤都可以在信息可用时立即将信息传递到下一步。

通过让函数在完成时执行回调，您可以摆脱对每个函数内部工作方式的任何限制。它可以做 AJAX 调用、定时器等等。只要“继续”回调向前传递，就可以有任意数量的异步工作层。

基本上，在异步系统中，如果你发现自己编写了一个循环来检查一个变量并找出它是否改变了状态，那么某个地方出了问题。相反，应该有一种方法来提供将在状态更改时调用的函数。

更新 3

我在评论的其他地方看到你提到实际问题是缓存结果，所以我解释这一切的所有工作都是浪费时间。这是你应该提出的问题。

更新 4

最近，我写了一篇关于在 JavaScript 中缓存异步调用结果的简短博客文章。

（更新 4 结束）

共享结果的另一种方法是提供一种方法，让一个回调“广播”或“发布”给多个订阅者：

function pubsub() {
    var subscribers = [];

    return {
        subscribe: function(s) {
            subscribers.push(s);
        },
        publish: function(arg1, arg2, arg3, arg4) {
            for (var n = 0; n < subscribers.length; n++) {
                subscribers[n](arg1, arg2, arg3, arg4);
            }
        }
    };
}

所以：

finished = pubsub();

// subscribe as many times as you want:

finished.subscribe(function(msg) {
    alert(msg);
});

finished.subscribe(function(msg) {
    window.title = msg;
});

finished.subscribe(function(msg) {
    sendMail("admin@mysite.com", "finished", msg);
});

然后让一些缓慢的操作发布它的结果：

lookupTaxRecords("Homer J. Simpson", finished.publish);

当一个呼叫结束时，它现在将呼叫所有三个订阅者。

于 2010-03-31T12:50:52.223 回答
5

对这个“准备好时给我打电话”问题的最终答案是回调。回调基本上是您分配给对象属性的函数（如“onload”）。当对象状态改变时，调用该函数。例如，此函数向给定的 url 发出 ajax 请求，并在完成时发出尖叫声：

function ajax(url) {
    var req = new XMLHttpRequest();  
    req.open('GET', url, true);  
    req.onreadystatechange = function (aEvt) {  
        if(req.readyState == 4)
            alert("Ready!")
    }
    req.send(null);  
}

当然，这还不够灵活，因为我们大概希望对不同的 ajax 调用有不同的操作。幸运的是，javascript 是一种函数式语言，因此我们可以简单地将所需的操作作为参数传递：

function ajax(url, action) {
    var req = new XMLHttpRequest();  
    req.open('GET', url, true);  
    req.onreadystatechange = function (aEvt) {  
        if(req.readyState == 4)
            action(req.responseText);
    }
    req.send(null);  
}

第二个函数可以这样使用：

 ajax("http://...", function(text) {
      do something with ajax response  
 });

根据评论，这里有一个如何在对象中使用 ajax 的示例

function someObj() 
{
    this.someVar = 1234;

    this.ajaxCall = function(url) {
        var req = new XMLHttpRequest();  
        req.open('GET', url, true);  

        var me = this; // <-- "close" this

        req.onreadystatechange = function () {  
            if(req.readyState == 4) {
                // save data...
                me.data = req.responseText;     
                // ...and/or process it right away
                me.process(req.responseText);   

            }
        }
        req.send(null);  
    }

    this.process = function(data) {
        alert(this.someVar); // we didn't lost the context
        alert(data);         // and we've got data!
    }
}


o = new someObj;
o.ajaxCall("http://....");

这个想法是在事件处理程序中“关闭”（别名）“this”，以便它可以进一步传递。

于 2010-03-31T12:52:33.933 回答
1

欢迎来到 SO！顺便说一句，你遇到了一个彻头彻尾的傻瓜，你的问题完全不清楚:)

这是基于@Daniel 使用延续的回答。这是一个将多个方法链接在一起的简单函数。就像管道|在 unix 中的工作方式一样。它以一组函数作为其参数，这些函数将按顺序执行。每个函数调用的返回值作为参数传递给下一个函数。

function Chain() {
    var functions = arguments;

    return function(seed) {
        var result = seed;

        for(var i = 0; i < functions.length; i++) {
            result = functions[i](result);
        }

        return result;
    }
}

Chained要使用它，请通过将所有函数作为参数传递来创建一个对象。您可以在小提琴上测试的一个示例是：

​var chained = new Chain(
    function(a) { return a + " wo"; },
    function(a) { return a + "r"; },
    function(a) { return a + "ld!"; }
);

alert(chained('hello')); // hello world!

​要将其与 AJAX 请求一起使用，请将链式函数作为成功回调传递给 XMLHttpRequest。

​var callback = new Chain(
    function(response) { /* do something with ajax response */ },
    function(data) { /* do something with filtered ajax data */ }
);

var req = new XMLHttpRequest();  
req.open('GET', url, true);  
req.onreadystatechange = function (aEvt) {  
    if(req.readyState == 4)
        callback(req.responseText);
}
req.send(null);

重要的是每个函数都依赖于前一个函数的输出，所以你必须在每个阶段返回一些值。

这只是一个建议 - 负责检查数据是否在本地可用或必须发出 HTTP 请求将增加系统的复杂性。相反，您可以拥有一个不透明的请求管理器，就像metaFunction您拥有的那样，让它决定数据是在本地还是远程提供。

这是一个处理这种情况的示例Request对象，没有任何其他对象或函数知道数据的来源：

var Request = {
    cache: {},

    get: function(url, callback) {
        // serve from cache, if available
        if(this.cache[url]) {
            console.log('Cache');
            callback(this.cache[url]);
            return;
        }
        // make http request
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        var self = this;
        request.onreadystatechange = function(event) {
            if(request.readyState == 4) {
                self.cache[url] = request.responseText;
                console.log('HTTP');
                callback(request.responseText);
            }
        };
        request.send(null);
    }
};

要使用它，您将调用Request.get(..)，如果可用，它会返回缓存数据，否则会进行 AJAX 调用。如果您正在寻找对缓存的精细控制，可以传递第三个参数来控制数据应该缓存多长时间。

Request.get('<url>', function(response) { .. }); // HTTP
// assuming the first call has returned by now
Request.get('<url>', function(response) { .. }); // Cache
Request.get('<url>', function(response) { .. }); // Cache
于 2010-03-31T17:57:11.253 回答
1

我已经解决了，现在它似乎工作得很好。我将在整理后稍后发布我的代码。同时，非常感谢您的帮助！

更新

在 Webkit（Safari、Chrome）、Mozilla 和 Opera 中尝试了代码。似乎工作得很好。期待任何答复。

更新 2

我更改了 tieExc() 方法以集成 Anurag 的链式函数调用语法。现在，您可以通过将它们作为参数传递来在完成检查时调用任意数量的函数。

如果您不喜欢阅读代码，请尝试：http: //jsfiddle.net/UMuj3/（顺便说一句，JSFiddle 是一个非常简洁的网站！）。

JS代码：

/**/function meta() {

var myMeta = this ;

/**  **/this.cllFnc = function(tgt,lgt) { //!! first function

    this.trigger = 0 ;  //!! status flag, initially zero
    var that = this ;   //!! required to access parent scope from inside nested function

    var _tgt = document.getElementById(tgt) ; //!! changes the color of the target div to signalize the function's execution
    _tgt.style.background = '#66f' ;

    alert('Calling! ...') ;

    setTimeout(function() { //!! simulates longer AJAX call, duration 5000ms

        that.trigger = 1 ;  //!! status flag, one upon completion

    },5000) ;

} ;

/**  **/this.rcvFnc = function(tgt) { //!! second function that should get called upon the first function's completion

    var _tgt = document.getElementById(tgt) ; //!! changes color of the target div to signalize the function's execution
    _tgt.style.background = '#f63' ;

    alert('... Someone picked up!') ;

} ;

/**  **/this.callCheck = function(obj) {    

    return (obj.trigger == 1)   ?   true
        :   false
        ;

} ;

/**  **/this.tieExc = function() {

    var functions = arguments ;

    var myItv = window.setInterval(function() {

        document.getElementById('target').innerHTML = new Date() ; //!! displays date in target div to signalize the interval increments

        var myCallCheck = myMeta.callCheck(functions[0]) ; //!! checks property "trigger"

        if(myCallCheck == true) { 

            clearInterval(myItv) ;

            for(var n=1; n < functions.length; n++) {

                functions[n].call() ;

            }

        } else if(myCallCheck == false) { 
            return ;
        }

    },100) ;



} ;

}​

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd >

<html>

<head>

    <script type='text/javascript'  >
        <!-- see above -->
    </script>
    <title>

      Javascript Phased Execution Test Page

    </title>

</head>

<body>

        <div id='target' style='float:left ; height:7.5em ; width:10em ; padding:0.5em 0 0 0; font-size:4em ; text-align:center ; font-weight:bold ; color:#eee ; background:#fff;border:0.1em solid #555 ; -webkit-border-radius:0.5em ;' >
            Test Div
        </div>

        <div style="float:left;" >
            <input type="button" value="tieCalls()" onmousedown="var myMeta = new meta() ; var myCll = new myMeta.cllFnc('target') ; new myMeta.tieExc(myCll, function() { myMeta.rcvFnc('target') ; }, function() { alert('this is fun stuff!') ; } ) ;" /><br />
        </div>

<body>


</html>
于 2010-04-01T11:40:01.727 回答
0

一个非常简单的解决方案是使您的第一个 ajax 调用同步。它是可选参数之一。

于 2010-03-31T12:54:52.567 回答