Javascript 销毁后的多次初始化

我有一个创建DataTables实例的函数，由于某种原因，它在销毁后初始化了n次。我之所以注意到这一点，是因为我在init上添加了自定义字段，并且它们在成倍增加。我可以预防这种情况，但这只是针对症状

为了澄清这一点，在我销毁实例并重新初始化它之后，如果是第二次初始化它两次，就要更改数据源。如果是第三次，三次，等等

我推测table变量是函数形成的闭包的一部分，因为即使我设置table=null，同样的事情也会发生

我怎样才能防止这种情况

数据表函数

---

我假设您没有删除该表，但在每次ajaxLoadTable调用中都添加了一个init处理程序。所以：第二次调用->调用两个init处理程序。这是绝对正确的，从.on改为.one，解决了这个问题。我只是假设同名事件被覆盖。我还有很多东西要学。我也完全消除了表破坏，因为我使用了一个ajax数据源，我可以调用reload来代替它。

/*Create a DataTable on tableElementID using pageUrl as the source*/
    function ajaxLoadTable ( pageUrl, tableElementID ) {

        window.table = $(tableElementID)
             .on( 'init.dt', function () {
            //The success function is used internally so it should NOT be overwritten, have to listen for this event instead
            //Add our custom fields _length refers to an element generated datatables                                           
                if ( additionalElements.saveButton ) {
                    $(tableElementID + '_length').after('<div class="dataTables_filter"><button>Save All Edits</button></div>');
                }

                if ( additionalElements.selectState ) {
                    $(tableElementID + '_length').after('<div class="dataTables_filter"><label>Project State: <select name="projectState" style="width:auto;"><option>Select ...</option><option value="Active">Active</option><option value="Historical">Historical</option></select></label></div>');
                }

                if ( additionalElements.searchBox ) {
                    $(tableElementID + '_length').after('<div class="dataTables_filter"><label>Search:<input type="search" id="customSearch" style="width:auto;"></label></div>');
                }   
            })
            .DataTable({ 
                        "processing": true,
                        "serverSide": true,
                        "ajax":{
                            type: "POST",
                            url: pageUrl,
                            data:  function ( additionalData ) {
                                        $('.serverData').each( function( index, element ){
                                            if( element.nodeName === "SELECT"){
                                              additionalData[element.name.toUpperCase()] =  element.options[element.selectedIndex].value;
                                              return true; //return true is equivalent to continue for $.each
                                            }
                                            additionalData[element.name.toUpperCase()] = element.value;
                                        });
                                    },
                            dataType: "json"                                    
                        }, 
                         "pageLength": 4,
                         "lengthMenu": [ 4, 8, 12, 16, 24 ],
                         "searchDelay": 1500,
                         "columnDefs": 
                                        {   "targets": 0, 
                                            "orderable": false,     
                                            "data": {
                                                "_":    "display"
                                            } 
                                        }
            });
    }

/*Load the selected project state*/
    $('html').on( 'change' , '[name=projectState]' ,function(){
        var currentState = $('option:selected', this).val();

        $('#projectState').val(currentState);

    //Remove the old table records and the datatables. Order matters, otherwise there is unsual behavior. 
        if(  $.fn.DataTable.isDataTable( '#searchTable' ) ) { 
            window.table.destroy();
            window.table = null;
        }

        $('.projectStateText').html( currentState );

    //Get the new table records 
        ajaxLoadTable( *some undisclosed URL*, '#searchTable');
    });