时间戳

首页 > 解决方案 > $(window).scroll() 监听器中的逻辑只更改一次值。从不按预期每次增加

jquery - $(window).scroll() 监听器中的逻辑只更改一次值。从不按预期每次增加

问题描述

我有一个简短的 jQuery 块，它应该在 ajax 调用后更新表行数。一旦滚动条到达页面底部，就会发生此 ajax 调用。该逻辑在您第一次到达底部时起作用，但在随后的每一次之后，该值都被卡住了。我不知道为什么。

jQuery：

$(window).scroll(function(e) {
     //If typing in search field, don't listen for scroll event
     if($('#search_server_ip_input').val()) {
         e.preventDefault();
     } else {
         //else do the things
         let windowHeight = $(window).height();
         let documentHeight = $(document).height();
         let windowScrollTop = $(window).scrollTop();
         let row = Number($('#unused_row').val());
         let allcount = Number($('#unused_all').val());
         let rowperpage = 200;
         let countertext = $('#counter_text');
         let url = 'includes/search_ajax/list-unused-server-addresses.php';
         let tablerow = $('.table-row');


         if (windowScrollTop + windowHeight === documentHeight) {
              //Add 200 more to the value of row
             row += rowperpage;
             $(countertext).text('Showing ' + row + ' out of ' + allcount + ' results');
              if (row >= allcount) {
                 row = allcount;
                 $(countertext).text('Showing ' + row + ' out of ' + allcount + ' results');
             }
             if (row <= allcount) {
                 console.log('Reached if (row <= allcount)');
                 $(row).val(row);
                 $.ajax({
                     type: 'post',
                     url: url,
                     data: {row: row},
                     success: function (data) {
                         //Show 200 additional rows of table
                         $('.table-row:last').after(data).show().fadeIn('slow');
                         //Update the text
                         $(countertext).text('Showing ' + row + ' out of ' + allcount + ' results');
                      }
                 })
             }

         }
     }
 })

MySQL 日志显示相同的内容，所以我知道第一次后在 ajax 调用中传递的值不正确。它应该是LIMIT 600,200，但它仍然是LIMIT 400,200：

SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 200,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 400,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 400,200

第三个查询应该是 1 600,200，但它仍然是 400。

标签： jqueryajaxdom-events

解决方案

由于某种原因，第一次到达页面底部后，行的值没有更新。因此，我创建了一个单独的 php 文件，该文件在第一次单击按钮时检索到 200 行的静态值。这个 php 文件在一个新函数中被调用。它与原始的 ajax 函数相同，只是没有data:{row:row}部分。$row我没有设置be的值，而是将其设为$_POST['row']200：

第一个按钮单击，称为新功能：

$('#server_unused_ip_btn').on('click', function() {
   //getUnused(row);
   getUnused(); //<-- No parameter this time
});

在新版本的被调用函数中，我将row被发送的值赋给了表中的行数，如下所示：

function getUnused() {
    $('input').not("input[type='hidden']").val('');
    $.ajax({
        url: 'includes/search_ajax/get-unused-server-addresses.php',
        type: 'post',
        success: function(data) {
            $('#server_result_table tbody').html(data);
            let row = $('#server_result_table tr').not('thead tr').length; //<-- Here is how row is calculated now
            $('#unused_row').val(row); //<-- Now give the hidden input the new value
            $('#counter_text').text('Showing '+ row + ' out of <?php echo $allcount; ?> results'); //<-- Correctly update the text with new value of row
        },
        error: function(jqXHR, status, error) {
            console.log('Error: '+error);
        }
    })
}

现在我的 MySQL 查询反映了更改已纠正它：

SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 200,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 400,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 600,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 800,200

所以基本上，简而言之，初始按钮单击执行一个获取静态值 200 的查询，然后当您滚动到页面底部时，即通过计算存在的行数通过 ajax 发送新值。除非有人提供更好的解决方案，否则这是有效的，我很乐意接受。

推荐阅读