在Javascript中传递函数作为参数

Passing a function as an argument in Javascript

本文关键字：参数 传递函数 Javascript      更新时间：2023-09-26

我真的很难处理这个问题——我肯定错过了一些简单的东西。

这是代码：-

function webcamupdate(webcamurl) {
    alert("I am a function to update the webcam with the url "+webcamurl);
}
function countdown(callback) {
    alert(callback);
    setTimeout("callback()", 10000);
}
var theurl = "THIS IS THE URL";
countdown(function(){ webcamupdate(theurl); });

正如你所看到的，我正在尝试构建一个倒计时功能(还有更多的代码，但我刚刚发布了基础知识(，它将在10秒后运行一个功能(在本例中更新网络摄像头(。

如果函数没有参数，则一切正常，但是coundown函数中的警报(回调(返回以下内容：-

函数((｛webcamupdate(theurl(；｝

当webcamupdate函数在未定义"webcamurl"的情况下运行时，这当然会使脚本崩溃。

警报(回调(实际上需要说的是：-

function((｛webcamupdate("这就是URL"(；｝

即，它在传递函数之前评估参数"theurl"。

任何想法都将不胜感激

编辑

我想我使用警报而不是功能可能误导了你(我只是想保持简单！(

这是原始代码(仍然被删减，但给了你一个更好的想法(。

function webcamupdate(url) {
    document.getElementById("cruisecam").src=url+"&rand="+Math.random();
    countdown(30,"Webcam",function(){ webcamupdate(url); });
}
function countdown(currentcount,displayelement,callback) {
    var displaytext;
    if (currentcount == 0 ) displaytext = displayelement+" is refreshing now";
    else displaytext = displayelement+" updating in "+currentcount+" seconds";
    if (trackingcountdown.hasChildNodes()) clearelement("trackingcountdown");
    trackingcountdown.appendChild(document.createTextNode(displaytext));
    if (currentcount == 0) {
        countdown(currentcount,displayelement,callback)
    }
    else {
        currentcount--;
        var countdownparameters=currentcount+',"'+displayelement+'",'+callback;
        setTimeout("countdown("+countdownparameters+")", 1000);
    }
}
//The function is called on window loading with
//countdown(30,"Webcam",function(){ webcamupdate(url); });
//clearelement is another function (not listed) that clears the node.

基本上，倒计时函数很重要——它需要3个参数——以秒为单位的倒计时时间、显示倒计时的DOM元素以及超时时运行的函数。

如果第三个参数(函数(没有自己的任何参数，例如webcam((，它可以正常工作，但当我们尝试添加网络摄像头("webcampic.jpg"(时，它不起作用，因为函数试图运行网络摄像头(url(而不是网络摄像头("webcampicjpg"(。

显然，最简单的解决方案只是将url设置为全局变量，但这不是一个好的做法，而且会阻止我通过js文件在其他页面上使用倒计时代码。帮助

只需从callback()更改为传递函数引用即可。

function webcamupdate(webcamurl) {
    alert("I am a function to update the webcam with the url "+webcamurl);
}
function countdown(callback) {
    alert(callback);
    setTimeout(callback, 10000);
}
var theurl = "THIS IS THE URL";
countdown(function(){ webcamupdate(theurl); });

var theURL = "THIS IS THE URL";
function webCamUrlUpdate( url ) {
    alert( "I am a function to update the webcam with the url " + url );
}
function countDown( callback ) {
    setTimeout( callback, 10000 );
    alert( callback );
}
countDown(function () {
    /* IMPORTANT: need to return that other function */
    return webCamUrlUpdate( theURL );
});

实际上，您希望返回该函数，以便setTimeout( callback, 10000 );按预期运行。当您在Javascript中提醒函数时，获取函数头和正文的完整字符串版本与alert(callback.toString())相同。

http://jsfiddle.net/btleffler/xJ5uw/

有趣的是，如果在setTimeout()之前提醒回调，那么回调似乎永远不会触发。如果您注释掉第一个警报，或者设置超时后的警报，它会很好地工作。我只在Chrome上测试过，所以我想我还需要做更多的研究。

无论哪种方式，在实际调用函数之前，都不能让javascript解析(或处理(函数的参数。不过，您可以让countDown()中的匿名回调自行提醒url。

好吧，伙计们，我终于自己解决了，这是其他人的解决方案。

首先创建一个返回函数的函数：

function createfunctionwebcamupdate(url) {
    return function(){ webcamupdate(url); };
}

然后设置一个变量以在调用时激发函数：

webcamupdatefunction = createfunctionwebcamupdate(url);

然后将这个新变量称为回调函数：

function(){ webcamupdatefunction(); }

当调用变量时，Javascript显然会记住存储在createfunction部分中的变量。

希望这能有所帮助。

相关文章：