ColdFusion 2018 执行长耗时插入查询时展示进度动画的最佳方案？

长查询会阻塞同步HTTP请求的响应，因此需要将查询执行和页面反馈拆分为异步流程，避免页面假死，同时实现加载动画的正常展示。

核心实现步骤 #

第一步：前端入口页实现加载动画+异步请求逻辑 #

页面点击提交后立刻展示加载动画，同时通过AJAX异步调用后端CF接口执行长查询，等待接口返回后再隐藏动画、提示结果，示例代码如下：

<!-- 加载动画容器，默认隐藏 -->
<div id="loading" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;">
  <div style="width:50px;height:50px;border:6px solid #f3f3f3;border-top:6px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;"></div>
  <p style="text-align:center;margin-top:12px;">正在处理数据，请稍候...</p>
</div>
<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<button id="submitBtn">执行批量插入</button>
<script>
document.querySelector('#submitBtn').addEventListener('click', function(){
  // 展示加载动画
  document.querySelector('#loading').style.display = 'block';
  // 禁用按钮避免重复提交
  this.disabled = true;

  // 异步请求CF后端执行查询
  fetch('./longInsertHandler.cfm')
    .then(res => res.json())
    .then(data => {
      // 请求完成隐藏动画
      document.querySelector('#loading').style.display = 'none';
      if(data.status === 'success'){
        alert('数据插入完成，共处理'+data.count+'条数据');
      }else{
        alert('处理失败：'+data.msg);
      }
      this.disabled = false;
    })
    .catch(err => {
      document.querySelector('#loading').style.display = 'none';
      alert('请求异常：'+err.message);
      this.disabled = false;
    })
})
</script>

第二步：CF后端实现长查询处理接口 #

新建longInsertHandler.cfm作为后端接口，首先设置足够长的请求超时时间避免查询被中断，执行完插入逻辑后返回JSON格式的结果，示例代码如下：

<!-- 设置请求超时为2分钟，覆盖系统默认超时配置，适配最长1分钟的查询需求 -->
<cfsetting requesttimeout="120">
<cfcontent type="application/json;charset=utf-8">
<cfset result = structNew()>

<cftry>
  <!-- 替换为实际的长插入查询逻辑，同步设置查询超时 -->
  <cfquery datasource="你的数据源名" timeout="120" result="insertRes">
    -- 你的30秒-1分钟耗时的插入SQL语句
    INSERT INTO target_table (col1,col2,col3)
    SELECT col1,col2,col3 FROM source_table
  </cfquery>

  <cfset result.status = "success">
  <cfset result.count = insertRes.recordcount>
  <cfset result.msg = "处理完成">

  <cfcatch type="any">
    <cfset result.status = "error">
    <cfset result.msg = cfcatch.message>
  </cfcatch>
</cftry>

<cfoutput>#serializeJSON(result)#</cfoutput>

可选优化：精准进度百分比展示 #

如果不满足于仅展示加载动画，需要展示实际处理进度，可以做如下改造：

• 提前统计需要插入的总条数，将插入逻辑拆分为多批次执行
• 每完成一批插入，就将当前完成数写入session或者application作用域的临时变量中
• 前端新增定时器，每隔2-3秒请求一个单独的进度查询接口，拉取当前进度更新页面进度条展示

注意事项 #

• 必须配置cfsetting的requesttimeout和cfquery的timeout参数，数值要大于业务的最大查询耗时，避免请求被强制中断
• 提交按钮必须做禁用逻辑，避免用户多次点击触发多个长查询占用数据库资源
• 如果插入操作涉及敏感数据，后端接口需要加权限校验，避免未授权调用

内容的提问来源于stack exchange，提问作者spacerobot