我可以动态构建一个函数名称来调用javascript吗?

时间:2012-10-31 15:33:31

标签: javascript jquery html

我有一个名为

的函数
BeforeSlide1() {
...
}


BeforeSlide2() {
...
}

我希望能够在循环中动态构建对这些的调用,如下所示:

        code = "BeforeSlide" + slide + "()"
        eval(code); 

现在这个我的代码显然不起作用(如果只是那么简单!)任何人都知道吗?

好的,我会画出全局。

我有一个由简单脚本运行的幻灯片

    function slideshow(slide) {
            if (pauseTimes[slide]>0) {
                    /* if there is another slide after the one currently showing... */

                //Call BeforeSlide-function if there is one
                code = "BeforeSlide" + slide + "();"
                try {
                    eval(code);                 

                } catch(e) {
                    /* do nothing since many slides don't have one */
                }           
                $('#slide'+slide).
                fadeIn(1500,function(){}).
                delay(pauseTimes[slide]).
                fadeOut(1500,function(){slideshow(slide+1);});
                ;
            }
            else {
                    /* if there is no more slide and we've reached the end, try to ajax-refresh the slideshow contents */
                ajaxUpdate();
            }
            }

在幻灯片本身的HTML中,之前和之后的功能定义如下:

    /* fire the slideshow from slide 1 once document is finished loading */
    $(document).ready(function(){
        slideshow(1);
    });

    </script>

    </HEAD>

    <body id="slideshow_body">

    <script id='pauseTimesScript' type='text/javascript'>
    /* Define pauseTimes (array holding duration of each slide) */
    try {
            pauseTimes=null;
            pauseTimes=undefined;
            pauseTimes = new Array();   
            setPauseTimes();        
            /*alert('satte först till null, deklarerade sedan om.');*/
    } catch(e) {
            pauseTimes = new Array();   
            setPauseTimes();        
            /*alert('deklarerade utan att först sätta null.');*/
    }

    function setPauseTimes() {  

        pauseTimes[1]=2000;         

        pauseTimes[2]=2000;         

        pauseTimes[3]=2000;         

    }
    </script>

    <div id="avbrott">Tillfälligt avbrott, visar cachelagrat innehåll sedan 2012-10-31 16:37:35</div>

    <div id="canvas" style="width:1072px;height:732px;">

                <script language='text/javascript'>
                function BeforeSlide1(order=1) {
                alert('here goes slide '+order);

                }
                </script>
                        <div id="slide1" class="slide" style="z-index:1;">



    <div id="slide_bg" style="float:left;height:100%;width:100%;background-color:#ffffff;background-image:url('http://bglabs.evade.netdna-cdn.com/45875kli90/505.jpg');">

        <div style="background-color:#eeeeee;color:#000000;float:right;text-align:center;margin-top:30px;padding:10px;font-weight:bold;font-size:30pt;" id="preview_title">Egypt rocks!</div>
        <div style="clear:both;float:none;"></div>

        <p style="color:#000000;margin:10px 10px 0 20px;font-style:italic;font-size:38pt;" id="preview_data_6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat pharetra eros, vitae ullamcorper tellus condimentum sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse in leo erat. Aliquam interdum molestie tortor, nec lacinia mauris viverra eget. Suspendisse aliquam tempor scelerisque. Proin vel purus nunc. Pellentesque ut sapien libero.<br />
    </p>

    </div>

这个BeforeSlide功能的目的当然是做其他事情而不是产生警报......

请让我知道如何以更好的方式构建它! =)

3 个答案:

答案 0 :(得分:2)

不要使用eval!声明的每个函数都可以通过window获得。试试这个:

function test() {
    alert("test");
}

var x = window['test'];
x();

Example fiddle

但是,拥有单个函数并将整数作为参数传递给它会更合乎逻辑。

答案 1 :(得分:1)

我可能会创建一个像下面这样的对象,

var myFunc = {
    BeforeSlide1: function () {
        //some stuff
    },
    BeforeSlide2: function () {
        //some stuff
    } 
}

然后您只需拨打myFunc['BeforeSlide' + num]

即可

答案 2 :(得分:0)

var code = "this.f = BeforeSlide" + slide + "() {...}";
eval(code);