javascript - 防止js函数被执行两次

Question

在我的应用程序中有一个包含国家/地区数据的表格，它也使用分页。对于每一行，都有一个删除按钮，该按钮通过 ajax 触发一个函数，国家从数据库中删除，该行向上滑动，并根据我们所在的页面再次呈现表格。

这是我原来的功能:

$(document).on('click', '.glyphicon-remove', function(event) {
    var thiz = $(this);
    var id = thiz.next('input:hidden').val();

    $.ajax({
        url: '/country/' + id,
        type: 'DELETE'
    })
    .done(function() {
        thiz.parent().parent().parent()
            .find('td')
            .wrapInner('<div style="display: block;" />')
            .parent()
            .find('td > div')
            .slideUp(200, function() {
                thiz.parent().parent().remove();
                    if (curPage) {
                        if ($('.table > tbody > tr').length > 1) {
                            renderCountries(curPage);
                        } else {
                            var page = getURLParameter(curPage, 'page');
                            if (page !== '1') {
                                prevPage = previousPageURL(curPage, 'page');
                                renderCountries(prevPage);
                                curPage = prevPage;
                            } else {
                                renderCountries();
                            }
                        }
                    } else {
                        renderCountries();
                    }
            });
    });
});

但是，我发现slideUp()函数被执行了多次，把整个事情搞砸了，我也不知道是什么原因，所以我改了，现在我我正在使用 delay():

$(document).on('click', '.glyphicon-remove', function(event) {
    var thiz = $(this);
    var id = thiz.next('input:hidden').val();

    $.ajax({
        url: '/country/' + id,
        type: 'DELETE'
    })
    .done(function() {
        thiz.parent().parent().parent()
            .find('td')
            .wrapInner('<div style="display: block;" />')
            .parent()
            .find('td > div')
            .slideUp(200)
            .delay(200, function() {
                thiz.parent().parent().remove();
                    if (curPage) {
                        if ($('.table > tbody > tr').length > 1) {
                            renderCountries(curPage);
                        } else {
                            var page = getURLParameter(curPage, 'page');
                            if (page !== '1') {
                                prevPage = previousPageURL(curPage, 'page');
                                renderCountries(prevPage);
                                curPage = prevPage;
                            } else {
                                renderCountries();
                            }
                        }
                    } else {
                        renderCountries();
                    }
            });
    });
});

但是，现在 delay() 之后执行的函数被执行了两次。我不明白为什么会发生这一切，我想知道如何解决这个问题。

编辑:HTML

<table class="table table-striped table-responsive">
    <thead>
        <tr>
            <th>Name</th>
            <th>Continent</th>
            <th>Capital</th>
            <th>Language</th>
            <th>Population</th>
            <th>Currency</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>asdfdsaf</td>
                <td></td>
                <td></td>
                <td></td>
                <td>0</td>
                <td></td>
                <td>
                    <form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="l2LCeqGRZARM6YUR6hqTgoKWNRRxAUcwspf4kf1v" type="hidden">
                        <span class="glyphicon glyphicon-remove btn btn-xs btn-danger"></span>
                        <input name="id" value="1" type="hidden">
                    </form>
                </td>
            </tr>

    </tbody>
</table>

Answer 1

我正在删除一堆额外的代码，但这是我的建议:

$.ajax({
    url: '/country/' + id,
    type: 'DELETE'
})
.done(function() {
    var first = true;
    thiz.parent().parent().parent()
        .find('td')
        .wrapInner('<div style="display: block;" />')
        .parent()
        .find('td > div')
        .slideUp(200)
        .delay(200, function() {
            if (first==true){
                first=false;
                thiz.parent().parent().remove();
                if (curPage) {
                    if ($('.table > tbody > tr').length > 1) {
                        renderCountries(curPage);
                    } else {
                        var page = getURLParameter(curPage, 'page');
                        if (page !== '1') {
                            prevPage = previousPageURL(curPage, 'page');
                            renderCountries(prevPage);
                            curPage = prevPage;
                        } else {
                            renderCountries();
                        }
                    }
                } else {
                    renderCountries();
                }
           }
        });
});

不解决触发两次的问题，只执行一次您的部分代码。