javascript - 每个使用 ajax 附加 div 的窗口调整大小事件，都会以某种方式创建一个额外的不需要的 ajax 调用

Question

我设置窗口调整大小以使用 ajax 调用创建一个 div，并删除以前创建的 div，如果找到这样的 div（我对其进行了测试，并且在多个调整大小事件时实际上没有创建不需要的额外 div -总是只有一个 div在 DOM 中）。

但是当那个 div 中的 ajax 触发时，它会触发我调整窗口大小的次数。我不确定可能是什么问题。似乎浏览器缓存了创建的 div，即使它只保留 DOM 中的当前 div，它也会导致缓存的 div 触发调整大小事件。我在 CMS 中禁用了缓存。

我已经尝试向 create_div 函数以及 fire_ajax 函数添加一个去抖动函数 - 它不起作用。

var set_up_div = debounce(function() {

            if (window.innerWidth <= 767 && $('#mydiv').length == 0) {
                $('#mydiv').remove();
                $('#mydiv').prepend(mydiv);
            } 
            if(window.innerWidth > 767 && $('#mydiv').length == 0) {
                $('#mydiv').remove();
                $('#mydiv').prepend(mydiv);
            }

},500);     

var fire_ajax = debounce(function() {

              $.ajax({
                url: 'index.php?route=extension/module/mycontroller/func1',
                type: 'get',
                beforeSend: function() {
                },
                complete: function(data){
                },
                success: function(data) {
                    $('#mydiv').html(data);
                        $.ajax({
                            url: 'index.php?route=extension/module/mycontroller/func2&data={{somedata}}',
                            type: 'get',
                            beforeSend: function() {
                            },
                            complete: function(data){
                            },
                            success: function(data) {

                                $('#somediv').html(data);
                            }
                        });                 
                }
            });

}, 500);

function f(){
    set_up_div();
    fire_ajax();
}    

window.addEventListener('resize', f);

我需要能够只触发一次 ajax，即使窗口早先调整了 n 次，但是我调整窗口的大小越多，调用 fire_ajax 函数时触发的 ajax 调用就越多，如控制台中所示。

标签： javascriptphpjquery