带参数的requestAnimationFrame是否需要特定调用方式？代码问题求助

核心问题是第二段代码里，requestAnimationFrame的回调捕获了初始调用时的data值，后续哪怕roi.data更新，回调里的data还是第一次传入的旧数据；而第一段代码每次执行都会重新读取roi?.data，能拿到最新状态。

另外还有两个破坏通用性的问题：

• chartCanvas依赖全局变量，应该作为参数传入
• threshold、pat同样是全局变量，建议转为参数让函数完全解耦

修复后的代码 #

function drawHistogram(dataProvider, chartContext, chartCanvas, threshold, patElement) {
    const data = dataProvider();
    if (!data) return;

    chartContext.clearRect(0, 0, chartCanvas.width, chartCanvas.height);
    // 创建存储每个强度值频率的数组
    let histogram = new Array(256).fill(0);

    for (let i = 0; i < data.length; i+=4) {
        const intensity = data[i];
        histogram[intensity]++;
    }

    // 找到最大频率
    let maxFrequency = Math.max(...histogram);

    // 绘制直方图柱子
    for (let i = 0; i < 256; i++) {
        let height = (histogram[i] / maxFrequency) * chartCanvas.height;
        if (histogram[i] === 1) height = Math.floor(Math.random() * 3); // 确保低频有显示
        chartContext.fillStyle = `rgb(0, 0, 255)`;
        const barWidth = chartCanvas.width / 256;
        chartContext.fillRect(i * barWidth, chartCanvas.height - height, barWidth, height);    
    }

    const totalPixels = histogram.reduce((sum, count) => sum + count);
    const pixelsAboveThreshold = histogram.slice(threshold + 1).reduce((sum, count) => sum + count);
    const percentageAboveThreshold = (pixelsAboveThreshold / totalPixels) * 100;
    patElement.innerHTML = `${percentageAboveThreshold.toFixed(2)}%`;

    requestAnimationFrame(() => drawHistogram(dataProvider, chartContext, chartCanvas, threshold, patElement));
}

// 调用时传入数据提供者函数，而非直接传数据
requestAnimationFrame(() => drawHistogram(
    () => roi?.data, 
    chartContext, 
    chartCanvas, 
    threshold, 
    pat
));

关键改动说明 #

• 用数据提供者函数() => roi?.data替代直接传roi?.data，确保每次执行drawHistogram都能获取最新的roi.data
• 将chartCanvas、threshold、pat转为参数，彻底消除全局变量依赖，让函数真正通用
• 用Math.max(...histogram)简化最大频率的计算
• 给百分比添加toFixed(2)处理，避免显示过多小数位

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