怎样在点击鼠标后，等待页面加载完成后再进行一下步的操作？
网页鼠标操作过程：鼠标点击“查询”按钮，会在“查询”按钮的下方（不是另外再开一个网页）给出查询出的数据（是一个表格）。
根据上面的鼠标实际操作过程，我编制了如下代码，本想在第一步操作后得到第二步的结果，但第二步的结果始终为0.。我分析是因为在第一步后，页面没有加载完成，所以第二步不能得到正确的结果。我在网上找了一些等待页面加载完成的代码，仿造着编制了几种代码，但始终不正确。
$(#btm).click(); //（第一步）点击“查询”按钮
qq=$(".datagrid-row").length; //（第二步）统计查询结果，即查询出的商品条目
alert(qq);
请问：如何在点击鼠标后，等待表格刷新完成后，立即统计出查询结果
补充：
1、在点击“查询”后商品条目的表格会刷新，但每次刷新后表格内出现的商品条目数量是不确定的，也许有十几个，也许一个也没有。如果有商品条目，接下来会一一点击其中的商品条目；如果没有商品条目，需要进行一下个点击“查询”动作。
2、在点击“查询”出现表格内容有商品条目时，点击商品条目具有“抢”商品的性质，所以，必须在商品条目出现的第一时间点击商品条目。
以下是一种思维，代码没测试过不一定对，思维可以参考：
let count = 0;
let interval = setInterval(function(){
if(count > 0){//不是第一次，检查自定义元素是否存在，存在说明页面未刷新，负责页面已刷新
let checkPage = $('#checkPage');
if(checkPage){//存在说明页面未刷新，不做任何处理
return;
}
}
let records = $(".datagrid-row");
console.info(records);
//下面处理业务
//处理完成，insert
insert();
$('#btm').click();//处理完成，重新查询
},1000);
function insert(){//自定义元素判断页面刷新，前提需要页面局部刷新能清除掉自定义元素
let parent = $(".parent-class");//datagrid-row上级元素的唯一class,有id更好，也可以通过id $("#parent-id")来控制操作
let checkPage = '<input type="hidden" value="100" id="checkPage"></input>';
parent.append(checkPage);//插入自定义元素，与.datagrid-row元素同级
}
$('#btm').click(); //（第一步）点击“查询”按钮
var timer = setInterval(function(){
var qq=$(".datagrid-row").length; //（第二步）统计查询结果，即查询出的商品条目
if (qq>0) {
clearInterval(timer);
alert(qq);
}
}, 50);
异步请求
代码如下：
$('#btm').click(); //（第一步）点击“查询”按钮
var timer = setInterval(function(){
qq=$(".datagrid-row").length; //（第二步）统计查询结果，即查询出的商品条目
if (qq>0) { // 判断存在条目是否>0
clearInterval(timer);
alert(qq);
// for循环遍历 点击每一个
}else if(qq=0){ //如果条目为0，那么进行下一个点击`查询`动作
clearInterval(timer);
//进行下一个点击`查询`按钮
}
}, 50);
如有问题，及时沟通
不知道你的HTML结构，基本操作逻辑如下：
<script>
$('#btm').on('click', function () {
//这里禁止下一步按钮的操作
$.ajax({
type: "post",
url: "/api/",
data:{},//传递参数
dataType:"json",
success:function(d){
if(d.code==0){//加载数据成功
//在这里加载表格数据
//这里解除下一步按钮的操
}
else{
}
}
});
return false;
})
</script>
你是需要将代码写在
$(function() {
// 你的代码
});
这是$(document).ready(function(){
}); 的简写，也是对 window.load事件的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>
<div>
<button id="bnt">add</button>
<div class="content"></div>
</div>
<script>
$('#bnt').click((e) => {
console.log('bnt')
setTimeout(() => {
$('.content').html(`<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>`)
let total = 0;
Array.from($('tr td')).forEach(element => {
total += element.innerHTML * 1
})
console.log(total, '==-')
alert(total)
}, 500)
})
</script>
</body>
</html>