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
            });
        });
    }
}

但是这个mehtod没有按预期工作，它会使函数“卡住”多次，好像触发器没有改变，点击事件就停止响应。

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

Answer 1

只需使用事件委派，您只需设置一次事件处理程序（页面加载时）：

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

一旦调用了它，那么它将适用于所有用户节，无论它们是否在页面加载时都存在。在ajax完成后你不需要做任何事情。

从ajax再次调用函数后，阻止函数多次运行

1 个答案: