防止多次执行 JavaScript 函数

Posted 2023-05-08

【中文标题】防止多次执行 JavaScript 函数

【英文标题】：Preventing to execute a JavaScript function more than once

【发布时间】：2010-09-30 18:28:05

【问题描述】：

我正在使用 javascript、jQuery 和 php。如何限制 JavaScript 函数执行一次？

我的 MainJQuery 文件有 Ajax。 display.php 执行一会：

....

$.ajax(
    type:'POST',
    url: 'display.php',
    data:'id='+id  ,
    success: function(data)
        $("#response").html(data);

        //Here Get_list should be execute only once.
        get_list('get');

        // Display should execute as usual
        display();
    //success
); //Ajax

.......

get.Php 文件向 JavaScript 写入一个值：

<?php
    print "<script language='javascript'>";
    print " g_cost[g_cost.length]=new Array('STA-VES','East',4500);";
    print " g_cost[g_cost.length]=new Array('STA-CRF','West',5400);";
    print "</script>";
?>

我的 JavaScript 函数具有来自 PHP 的以下值：

function get_list('get')
    for(var i=0;i<g_cost.length;i++)
        var temp = g_cost[i];

    var Name = temp[0];
    var direction = temp[1];
    var cost = temp[2];

    ..
    some code
    ...


function display()
    for(var i=0;i<g_cost.length;i++)
        alert(g_cost.length);
    var temp = g_cost[i];
    alert(temp[0]);
    alert(temp[1]);
    alert(temp[2]);

是否可以限制在 jQuery Ajax 成功部分执行 JavaScript 函数？

【问题讨论】：

Run javascript function only once的可能重复

【参考方案1】：

在 jQuery 中，您可以使用 .one() 函数来绑定只执行一次的方法。例如，

$("#someAnchorId").one("click", function()
    //Ajax method here 
);

见jQuery one help topic。

【参考方案2】：

您可以用空函数替换该函数 - 这与 Rene Saarsoo 的解决方案基本相同，但看起来更好：

var get_list = function(param1, param2, ...) 
     // your code here
     get_list = function() ;
;

【讨论】：

在“// your code here”部分中，您留下将运行一次的代码，在子函数中您放置每次运行的代码。

最好做 get_list = Function('');防止内存泄漏。

【参考方案3】：

三个选项：

在全局范围内设置一个布尔标志，运行成功后设置，运行前检查

成功运行后，禁用按钮（或您用来调用一次性方法的任何控件）

不太受欢迎，但您也可以在服务器端进行验证，即每次调用该方法，但在服务器端进行验证。好处是这将确保服务器上的数据一致性。

【讨论】：

引入全局变量是个坏主意。

【参考方案4】：

创建一个只执行一次的函数：

get_list = (function()
  var counter = 0;
  return function(param1, param2, ...) 
    if (counter > 0) 
      return;
    
    counter++;

    // your normal function code here
  ;
)();

这与使用全局变量来跟踪函数执行的次数几乎相同，只是我们创建了一个只有内部函数才能看到的变量而不是全局变量。之后，您将 get_list 用作任何其他函数。

这可能会在函数原型中被重构为更通用的东西，因此可以这样使用：

get_list = (function (param1, param2, ...) 
  ...
).once();

【参考方案5】：

最快的方法是在成功声明中多加一行：

$.ajax(
    type:'POST',
    url: 'display.php',
    data:'id='+id  ,
    success: function(data)
        if(!arguments.callee.stop) arguments.callee.stop = true; else return; 

        $("#response").html(data);
        //Here Get_list should be execute only once   
        get_list('get');

        // display should execute as usual  
        display();

    //success
); //ajax

【参考方案6】：

尝试在调用成功后禁用 Ajax 触发器（链接、按钮等）。

触发器示例：

<a id="ajax_trigger" href="#" onclick="yourAjaxCall(); return false;">Get List</a>

...

success: function(data)
    $("#response").html(data);
        //Here Get_list should be execute only once
         get_list('get');

        // Some code to disable, or hide #ajax_trigger
        // in other words, make it unclickable or disappear.
        $("#ajax_trigger").css('display': 'none'); // IIRC

        // Display should execute as usual
        display();
//success