Question

我有一个图表，每次加载页面时都会动态创建。我在＆lt; div id =＆＃34;情节＆＃34;＆gt;＆lt; / div＆gt;中有它块。我想让用户能够打开/关闭自动刷新并选择刷新率。对此有很多密切相关的解决方案，但没有一个解决这个问题和我挣扎的问题。要切换完整重新加载，我使用this example。这很好用。但是，我无法弄清楚如何扩展它以让用户从以下内容中选择间隔：

<select name="interval" id="interval">
    <option value="1000">1</option>
    <option value="2000">2</option>
    <option value="5000">5</option>
    <option value="10000">10</option>
</select>

我似乎都不知道如何将结果传递给javascript并让它记住重新加载后的间隔。我猜我不仅需要将它传递给javascript，还能以某种方式取消当前超时并将其重置为新值？

Answer 1

也许做一些简单的事情，比如传入onClick事件中的区间选择id的第二个参数，如：

<input type="checkbox" onclick="toggleAutoRefresh(this, 'interval');" id="reloadCB"> Auto Refresh

然后在JS中设置一个带有区间选择的新变量，如果页面重新加载包括#autoreload之后的间隔时间，并在锚点哈希中重新加载之间传递：

   var reloading;
    $(document).ready(function () {

        $('#interval').change(function () {
            if (document.getElementById("reloadCB").checked) {
                var intervalSelection = $(this).find(":selected").val();
                window.location.replace("#autoreload-" + intervalSelection);
                reloading = setTimeout("window.location.reload();", intervalSelection);
            } else {
                window.location.replace("#");
                clearTimeout(reloading);
            }
        });

    });

    function checkReloading() {
        if (window.location.hash.substring(0, 11) == "#autoreload") {
            var intervalSelection = window.location.hash.substring(12, window.location.hash.length);
            reloading = setTimeout("window.location.reload();", intervalSelection);
            document.getElementById("reloadCB").checked = true;
            var intervalSelect = document.getElementById('interval');
            var intervalOptions = intervalSelect.options.length;
            for (var i = 0; i < intervalOptions; i++) {
                if (intervalSelect.options[i].value == intervalSelection) {
                    intervalSelect.options[i].selected = true;
                    break;
                }
            }
        }
    }

    function toggleAutoRefresh(cb, intervalID) {
        var intervalSelection = $('#' + intervalID).find(":selected").val();
        if (cb.checked) {
            window.location.replace("#autoreload-" + intervalSelection);
            reloading = setTimeout("window.location.reload();", intervalSelection);
        } else {
            window.location.replace("#");
            clearTimeout(reloading);
        }
    }

    window.onload = checkReloading;

Haven没有测试任何这个，可能不是最优雅的解决方案，但首先想到的是。

编辑：添加了一些代码来设置下拉到通过哈希标记传递的值，以及一些JQuery来检测下拉值的变化并设置新的间隔时间。

使用切换复选框和用户选择的间隔自动重新加载div

1 个答案: