javascript - 防止函数在从 ajax 再次调用后多次运行

Question

长期以来，我一直在努力寻找一个好的解决方案来解决这个问题。 (而且我已经谷歌了很多次)。当我在 ajax 调用后调用它时，我试图避免多次运行同一个函数。我将使用以下代码给出一个简单的示例:

我使用 php 从我的数据库加载用户列表:

while(some loop){
    $users.='
        <div>
            <div>user name</div>
            <div class="replace">replace user</div>
            <div class="delete">delete user</div>
        </div>
    ';
}

并将它们显示在一个 div 中:

<div class="user_wrap">
    <?php echo $users; ?>
    <div id="add_user"></div>
</div>

现在在前端，我可以删除或替换每个用户或将新用户添加到 div，这样我就可以在文档就绪时运行所有三个函数:

$(document).ready(function(){
    addUser();
    deleteUser();
    replaceUser();
});

function addUser(){
    $("#add_user").on("click",function(){
        //first load a list of users then select one from it
        $.post("url",{},function(response){
            //add new user to the user wrap
            deleteUser();
            replaceUser();
        });
    });
}

function deleteUser(){
    $(".delete").on("click",function(){
        $.post("url",{},function(response){
            //delete user
        });
    });
}

function replaceUser(){
    $(".replace").on("click",function(){
        $.post("url",{},function(response){
            //replace user with a different user
        });
    });
}

现在问题来了，当我使用 ajax 添加新用户时，我必须重新运行 deleteUser 和 replaceUser 函数。所以这些功能开始堆积起来，可以连续运行多次。在某些情况下，这对函数的结果无害，但在某些情况下，它实际上会损害函数的结果，而且它不会占用大量系统资源吗？我能够阻止它的唯一方法是通过设置全局变量并执行类似以下操作来使用触发器:

DelteUserTrigger = 0;

function deleteUser(){
    if(DelteUserTrigger==1){return false;}
    else{
        DelteUserTrigger=1;
        $(".delete").on("click",function(){
            $.post("url",{},function(response){
                DelteUserTrigger==0;
                //delete user
            });
        });
    }
}

但是这个方法并没有像预期的那样工作，它多次使函数“卡住”，就好像触发器没有改变一样，点击事件只是停止响应。

我还阅读了一些有关 JS 中的函数闭包的内容，以防止同一函数多次运行，但我并没有放弃理解如何使用 ajax 调用来实现它。在这种情况下它真的有用还是我在这里做错了？非常感谢您的帮助。

Answer 1

只需使用事件委托(delegate)，您只需设置一次事件处理程序(当页面加载时):

function deleteUser(){
    $(document).on("click", ".delete", function(){
        $.post("url",{},function(response){
            //delete user
        });
    });
}

一旦它被调用，那么它将对所有用户节起作用，无论它们在页面加载时是否存在。 ajax 完成后您无需执行任何操作。