如何在setInterval / setTimeout函数中按名称调用函数?

时间:2013-11-24 01:00:12

标签: javascript jquery function

function loadDate() 
{
    $.ajax({
        type : "POST",
        url : "/ajax/date",
        data : "text",
        success : function(response) 
        {
            $('#dateSection').html(response);
        },
        error : function(e) 
        {
            alert('Ajax Request Failed: ' + e);
        }
    });
}

function loadPoop() 
{
    if(true)

    $.ajax({
        type : "POST",
        url : "/ajax/poop",
        data : "text",
        success : function(response) 
        {
            $('#poopSection').html(response);
        },
        error : function(e) 
        {
            alert('Ajax Request Failed: ' + e);
        }
    });
}

这基本上就是我想要做的事情,但除了拨打电话之外我没有尝试过任何事情

function ajaxCaller(function_name)
{   
    setInterval(window[function_name], 1000);
    //or
    setInterval(function_name, 1000);
}

html页面

<button type="button" onclick="loadDate()">Date Button</button>
<div id="dateSection">Ajax Me Bro!</div>

<button type="button" onclick="ajaxCaller(loadDate())">Poop Button</button>
<div id="poopSection">Ajax Me Bro!</div>

<button type="button" onclick="ajaxCaller(loadPoop())">Ajax Caller Button</button>
<div id="ajaxCallerSection">Ajax Me Bro!</div>

5 个答案:

答案 0 :(得分:2)

JavaScript中的函数是一流的对象。这意味着您可以像使用任何其他普通变量一样使用它们。如果您松开HTML代码中的括号:

<button type="button" onclick="ajaxCaller(loadDate)">Poop Button</button>
<div id="poopSection">Ajax Me Bro!</div>

<button type="button" onclick="ajaxCaller(loadPoop)">Ajax Caller Button</button>
<div id="ajaxCallerSection">Ajax Me Bro!</div>

您告诉JavaScript不要调用函数 loadPoop loadDate ,而是将其作为变量直接传递给函数 ajaxCaller

使用括号(),您首先正在运行 loadDate ,然后传递<的结果< em> loadDate 到 ajaxCaller 。在这种情况下, loadDate loadPoop 都不会返回任何内容,因此 ajaxCaller 也不会收到任何内容,也不会设置超时。

答案 1 :(得分:1)

Samw的回答是正确的 - 但我想尝试详细说明这件事。

在您的代码中,您将loadPoop()和loadDate()的返回值作为参数传递给ajaxCaller()。基本上 - 首先调用loadPoop(),然后返回它返回的值(在你的情况下没有任何内容)被传递到ajaxCaller()。

在Samw的回答中,指向函数loadPoop()和loadDate()的指针作为参数传递,允许您稍后使用function_name()调用函数。使用setInterval也会发生同样的事情,您可以在setInterval中将指向要调用的函数的指针作为参数传递。

如果您认为参数不是作为对象或值而是作为地址,那么这会更有意义 - 基本上会发生的是代码的执行“跳转”到内存地址(变量名称只是我们人类称之为特定内存地址) - 并且由于函数在内存中的那一点开始执行 - 它只是继续执行。

现在这可能有点过于简单了,但希望它能让你更好地了解为什么这样做,以及为什么你的方法不起作用。

欢迎来到指针世界!

答案 2 :(得分:1)

由于你正在使用jQuery,我倾向于重新编写代码以利用它。你可以将内联代码分离出来,这是一件好事,你可以通过传入函数参数将ajax函数的数量减少到一个。

<button type="button" data-fn="default">Date Button</button>
<div id="dateSection">Ajax Me Bro!</div>

<button type="button" data-fn="date">Poop Button</button>
<div id="poopSection">Ajax Me Bro!</div>

<button type="button" data-fn="poop">Ajax Caller Button</button>
<div id="ajaxCallerSection">Ajax Me Bro!</div>

$(function () {

  function loadAjax(fn) {
    $.ajax({
      type: "POST",
      url: "/ajax/" + fn,
      data: "text",
      success: function (response) {
        $('#' + type + 'Section').html(response);
      },
      error : function (e) {
        alert('Ajax Request Failed: ' + e);
      }
    });
  }
  }

  $('button').click(function () {
    var fn = $(this).data('fn');
    switch (fn) {
      case 'date':
        setTimeout(function () {
          loadAjax('date');
        }, 1000);
        break;
      case 'poop':
        setTimeout(function () {
          loadAjax('poop');
        }, 1000);
        break;
      default:
        loadAjax('date');
        break;
    }
  });

});

答案 3 :(得分:1)

宣言:

function ajaxCaller(fn) {   
    setInterval(fn, 1000);
}

用法:

ajaxCaller(loadDate) // instead of : ajaxCaller(loadDate())
ajaxCaller(loadPoop) // instead of : ajaxCaller(loadPoop())

请勿亲自致电fn,让setInterval完成这项工作。

答案 4 :(得分:0)

我认为这个论点不能成为一个功能!!无论如何只需使用以下

function ajaxCaller(value)
{
if (value=="loadPoop")


setInterval(function(){loadPoop()},1000);

if (value=="loadPoop")

setInterval(function(){loadDate()},1000);
}

并将参数更改为字符串

<button type="button" onclick="ajaxCaller("loadDate")">Poop Button</button>
<div id="poopSection">Ajax Me Bro!</div>

<button type="button" onclick="ajaxCaller("loadPoop")">Ajax Caller Button</button>
<div id="ajaxCallerSection">Ajax Me Bro!</div>

我认为这里的解决方案更具动态性: How to execute a JavaScript function when I have its name as a string