typescript 是否需要d3工具提示去抖动

jvidinwx 于 2023-05-01 发布在 TypeScript

关注(0)|答案(1)|浏览(94)

我有一个mousemove函数，在我的d3图表上看起来像这样。props.metrics是一个指标列表（不超过10），每个指标包含一个指标值数组。

function mousemove(e: MouseEvent) {
        const x0 = x.invert(d3.pointer(e, svg.node())[0]);
        const i = bisect(dates, x0, 1);
        if (dates[i]) {
            props.setLiveMoves({
                ticker: tickerSymbol,
                metricId: 'price',
                value: props.data.dataY[i],
            });
            props.setLiveMoves({
                ticker: tickerSymbol,
                metricId: 'date',
                value: props.data.dataX[i],
            });
            if (props.metrics) {
                props.metrics.map((entry: TickerMetricStoreFormat) => {
                    props.setLiveMoves({
                        ticker: tickerSymbol,
                        metricId: entry.metricId,
                        value: entry.value[i],
                    });
                });
            }
            focus
                .selectAll(`.${lineClassname}_y`)
                .attr('transform', `translate(${x(dates[i])}, 0)`);
            focus
                .selectAll(`.${lineClassname}_x`)
                .attr('transform', `translate(0, ${y(props.data.dataY[i])})`);
        }
    }

这被附加到覆盖图表区域的矩形上。

svg.append('rect')
        .attr('class', mousetrackerClassname)
        .style('fill', 'transparent')
        .style('pointer-events', 'all')
        .attr('width', width)
        .attr('height', height)
        .on('mouseover', mouseover)
        .on('mousemove', mousemove)
        .on('mouseout', mouseout);

我的问题是：这个mousmove功能成本有多高，在这个工具提示悬停中添加去抖动是否是一个常见的设计模式？如果是这样，我如何实现去抖动？

typescript

来源：https://stackoverflow.com/questions/76140977/d3-tooltip-debounce-required-or-not

1条答案

按热度按时间

4nkexdtk1#

一般来说，对事件进行去抖动的简单方法是：

声明一个变量，在其中存储调用setTimeout（清除超时所需的）时始终获得的id
当事件发生时清除超时，并设置一个新的超时，该超时将在短时间内运行（可能是100 ms），并将超时的id存储在变量中
当事件停止触发时，它不会在函数有时间运行之前清除最后一个超时。..
代码示例：*

let mouseMoveTimeout;
window.addEventListener('mousemove', () => {
  clearTimeout(mouseMoveTimeout);
  mouseMoveTimeout = setTimeout(() => {
    /* things to do */
    console.log('Called after 100ms of no mouse moves');
  }, 100);
});

是的，像mousemove，scroll等事件确实会生成很多事件，所以我建议对这些事件进行去抖动，以及触发API调用的input/search-field中的keyup-event（大约150- 200 ms，所以用户在发送api查询之前就停止了输入）。

赞(0）回复(0）举报 2023-05-01

我来回答

typescript 是否需要d3工具提示去抖动

1条答案

相关问题

热门标签

最新问答