Shiny中Date().getTime()获取点击时间晚于服务端时间问题

你当前的代码出现客户端时间晚于服务端时间的问题，核心是两个实现错误：

• 事件绑定逻辑写在renderImage中执行时，img DOM节点还未完成渲染更新，你自定义的onclick事件触发优先级低于Shiny默认绑定的图片点击事件，Shiny会先把点击事件上报到服务端触发server_time记录，你的JS采集的客户端时间反而随后续请求到达服务端，才会出现时间倒挂。
• 跨端对时逻辑本身不可靠：客户端和服务端存在系统时钟差、网络传输延迟，直接对比两个端的系统时间本身就无法得到精准的「查找时长」。

要完全消除传输延迟、时钟差的干扰，所有时间采集、时长计算逻辑全部放在客户端完成，只把最终计算结果上报给服务端即可，不需要同时采集服务端时间做对比：

1. 采集图片在用户浏览器中实际加载完成的时间戳，作为查找计时起点
2. 采集用户点击图片瞬间的浏览器时间戳，作为查找计时终点
3. 两个时间戳直接在前端相减得到毫秒级查找时长，和点击坐标等数据一次性上报给服务端

library(shiny)
options(digits.secs = 3)

# 直接在UI层绑定事件，不要在render中重复绑定
click_js <- '
// 存储计时起点
let searchStart = 0;
// 监听图片输出更新
$(document).on("shiny:value", "#img", function(){
  const imgEl = $(this).find("img");
  // 图片加载完成后记录起始时间
  imgEl.off("load").on("load", function(){
    searchStart = new Date().getTime();
  });
  // 绑定点击事件
  imgEl.off("click").on("click", function(e){
    if(!searchStart) return;
    const clickTime = new Date().getTime();
    const duration = clickTime - searchStart;
    // 一次性上报所有数据
    Shiny.setInputValue("user_click_data", {
      click_timestamp: clickTime,
      search_duration_ms: duration,
      x: e.offsetX,
      y: e.offsetY
    });
    // 重置计时，避免重复触发
    searchStart = 0;
  })
})
'

shinyApp(
  ui = fluidPage(
    tags$script(click_js),
    sidebarLayout(
      sidebarPanel(
        p("点击图片时自动采集客户端时间，计算精准查找时长"),
        actionButton(inputId="new_image", label= "生成新图片")
      ),
      mainPanel(
        # 去掉自带的click绑定，完全用JS接管
        imageOutput("img"),
        textOutput("show_data")
      )
    )
  ),
  server = function(input, output) {
    output$img <- renderImage({
      input$new_image
      outfile <- tempfile(fileext='.png')
      png(outfile, width=400, height=400)
      hist(rnorm(100))
      dev.off()
      
      list(src = outfile,
           alt = "测试图片")
    }, deleteFile = TRUE)

    output$show_data <- renderText({
      req(input$user_click_data)
      data <- input$user_click_data
      paste0(
        "客户端点击时间：", as.POSIXct(data$click_timestamp/1000, origin="1970-01-01"), "\n",
        "查找时长（毫秒）：", data$search_duration_ms, "\n",
        "点击坐标：x=", round(data$x,2), ", y=", round(data$y,2)
      )
    })
  }
)

• 时长计算完全在客户端完成，从图片加载完成到用户点击的时间差不会经过任何网络传输，误差小于1毫秒，完全消除传输延迟干扰
• 不需要做客户端、服务端时钟对齐，两个时间戳都取自用户浏览器本地时钟，不存在时钟差问题
• 不会再出现客户端时间晚于服务端时间的倒挂问题

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