簡體   English   中英

防止多次執行JavaScript函數

[英]Preventing to execute a JavaScript function more than once

我正在使用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函數?

在jQuery中,您可以使用.one()函數綁定一個只執行一次的方法。 例如,

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

請參閱jQuery一個幫助主題

您可以使用空函數替換該函數 - 這與Rene Saarsoo的解決方案基本相同,但看起來更好:

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

三種選擇:

  1. 在全局范圍內設置布爾標志,在成功運行后設置它,並在運行之前進行檢查

  2. 成功運行后,禁用按鈕(或用於調用一次性方法的任何控件)

  3. 略微不太優選,但您也可以在服務器端進行驗證,即每次調用方法,但在服務器端驗證。 好的一面是,這將確保服務器上的數據一致性。

要創建僅執行一次的函數:

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

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

這與使用全局變量跟蹤函數執行次數幾乎相同,除了我們創建變量而不是全局變量,只有內部函數可以看到。 之后,您將get_list用作任何其他函數。

這可能會被重構為函數prototye中更通用的東西,因此它可以像這樣使用:

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

最快的方法是在成功申報中添加一行:

$.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

嘗試在成功調用后禁用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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM