很长一段时间以来,我一直在努力为这个问题找到一个好的解决方案。(我已经看了很多次了)。当我在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函数。因此,thoes函数开始堆积,并且可以连续运行多次。在某些情况下,这对函数的结果是无害的,但在一些情况下,它实际上损害了函数的结果,而且这不是需要大量的系统资源吗?我唯一能阻止它的方法是通过设置全局变量并做一些事情来使用触发器,比如:
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调用实现这一点。在这种情况下,它真的有用吗?还是我在这里做错了一切?我真的很感激这里的帮助。
只需使用事件委派,您只需设置一次事件处理程序(当页面加载时):
function deleteUser(){
$(document).on("click", ".delete", function(){
$.post("url",{},function(response){
//delete user
});
});
}
一旦调用了它,它将适用于所有用户节,无论它们在页面加载时是否在那里。ajax完成后,您不需要做任何事情。