时间滑块使用setInterval（）自动移动

Question

我正在尝试制作一个Mapbox地图，该地图将按时间顺序显示给定年份的数据，并且我正在尝试按顺序自动指定年份。

但是，我在使用setInterval自动移动以下脚本中的时间滑块时遇到问题，它给了我一个[对象HTMLLabelElement]而没有移动滑块。

我是否将setInterval设置为错误的函数？

std::chrono::steady_clock::time_point begin0 = std::chrono::steady_clock::now();
regex re("<option[\\s]value[\\s]*=[\\s]*\"([^\">]*)\"[\\s]*[^>]*>", regex::icase);
int found = 0;
for (std::cregex_iterator i = std::cregex_iterator(input, input + input_length, re);
i != std::cregex_iterator();
    ++i)
{
    found++;
    if (found < 10000) continue;
    break;
}
std::chrono::steady_clock::time_point end0 = std::chrono::steady_clock::now();

我的数据可以在geojson中找到：

Answer 1

目前您对setInterval的使用不正确，并且您有一些语法错误。

你目前在哪里：

var Year =  set.Interval(function() { parseInt(Years[e.target.value] }, 1000);

请改为尝试：

var Year = window.setInterval(function() { parseInt(Years[e.target.value]) }, 1000);

您可能在其他地方仍有一些问题，但我在d3中正确解析数据端点时遇到了困难。如果您需要，可以帮助发布一个codepen或其中的某些内容以获得更多帮助。

编辑：

我已经从您当前的设置中创建了一个codepen，它可以帮助您更轻松地修补：http://codepen.io/anon/pen/EZjKqM

正如您所看到的，我做了一些更改，例如在使用filterBy函数的年数组中添加一些内容。它不能很好地工作，但你可以看到它是如何正确解析数据并在第二年更改年份。

这是通过使用以下JS实现的：

// Automatically cycle through years.
var yearSlider = document.getElementById('slider');
var curYearIndex = -1;

function advanceYear() {
    ++curYearIndex;
    if (curYearIndex >= years.length) {
        curYearIndex = 0;
    }
    return years[curYearIndex];
}

var cycleYears = window.setInterval(function() { 
    var currentYear = advanceYear();
    filterBy(parseInt(currentYear));
}, 1000);

不幸的是，这可能就我所知，因为我还有其他工作要做，但它可能会给你一些起点。

Answer 2

@Wakeuphate，这是一个很棒的解决方案（相应地投票）。我能够快速实施我的项目。

似乎缺少的项目也在移动滑块。我只需添加以下行就能实现这一目标：

    document.getElementById('slider').value = currentYear;

这样整个函数看起来像：

var cycleYears = window.setInterval(function() { 
        var currentYear = advanceYear();
        filterBy(parseInt(currentYear));
        document.getElementById('slider').value = currentYear;
    }, 1000);