Question

我目前正在使用D3.js并修改了我的图表，从监听鼠标悬停/鼠标移动到鼠标移动。这在图表中带来了不少问题，但没有比我的GET statuses/show/:id请求更多的问题。

以前，我会在我的图表上有点悬停，如果在该点半小时内有一条推文（来自后端的推文数据库），它会发送一条GET请求来获取该推文。

我现在的问题是，因为我在我的图表上使用mousemove接近这些点而不是鼠标悬停，所以它会发射数百次，并且GET请求在15分钟的窗口内限制为900。

var tweet_arr = [];
for(j in data_tweets){
    var tweet_time = timeParser(data_tweets[j]['timestamp_s']);
    var point_time = timeParser(d.timestamp);
    var diff = point_time.getTime() - tweet_time.getTime();
    if(diff<=1800000 && diff>=-1800000) {
        tweet_arr.push(data_tweets[j]);
    } else {
        var tweet_list = []
        d3.selectAll(".panel-body")
            .data(tweet_list)
            .exit()
            .remove();
    }
}
twitterapi.fetch().getTweets(tweet_arr, tweet_urls[0], tweet_urls[1]);

此函数检查x轴上最近点之间的差异并检查我的tweet数据集合，如果有半小时，将其添加到名为tweet_arr的数组中，然后将其传递给我的fetch()函数，它对Flask框架进行了AJAX调用，我按ID运行我的GET请求。

我理想情况下要做的是检查一下，如果在最后5秒内执行了获取特定推文的请求，请不要运行fetch()函数。

我将如何做这样的事情？

Answer 1

看一下来自underscore.js的debounce和油门：http://underscorejs.org/#debounce， http://underscorejs.org/#throttle

这是一篇关于去除请求的好帖子：https://www.google.de/amp/s/davidwalsh.name/javascript-debounce-function/amp

有关油门和去抖动的比较，请参阅https://gist.github.com/makenova/7885923

您需要在单独的函数中定义获取逻辑，并将其放入_.debounce。

看一下这个例子：https://codepen.io/anon/pen/EQwzpZ?editors=0011

const fetchFromTwitter = function(s) { console.log(s) }
var lazyFetch = _.debounce(fetchFromTwitter, 100)

lazyFetch('This is')
lazyFetch('is')
lazyFetch('gonna be')
lazyFetch('legen ... ')
lazyFetch('wait for it')
lazyFetch('... dary')
lazyFetch('LEGENDARY')

限制GET请求（D3.js / Twitter API）

1 个答案: