清除由创建超时的class.each操作应用的setTimeouts

时间:2015-11-24 21:01:28

标签: javascript jquery html5 dom

对不起,标题可能没有多大意义。我不确定如何说出我在做什么。

我有一个类,我添加到使用HTML5数据属性来设置刷新计时器的元素。这是当前的代码。

$(document).ready(function () {
    $('.refresh').each(function() {
        var element = $(this);
        var url = element.data('url');
        var interval = element.data('interval');
        var preloader = element.data('show-loading');
        var globalPreloader = true;

        if (typeof preloader === 'undefined' || preloader === null) {
        }
        else if (preloader != 'global' && preloader != 'true') {
            globalPreloader = false;
        }

        (function(element, url, interval) {
            window.setInterval(function () {

                if (!globalPreloader)
                {
                    $('#' + preloader).show();
                }

                $.ajax({
                    url: url,
                    type: "GET",
                    global: globalPreloader,
                    success: function (data) {
                        element.html(data);

                        if (!globalPreloader) {
                            $('#' + preloaderID).hide();
                        }
                    }
                });

            }, interval);
        })(element, url, interval);
    });
    $.ajaxSetup({ cache: false });
});

现在我有一些元素,用户可以点击“窗口”删除它。 这些元素可能会被上面代码设置的计时器累掉。

用于删除元素的代码

$(".btn-close").on('click', function () {
    var id = $(this).closest("div.window").attr("id");

    if (typeof id === 'undefined' || id === null) {
    } else {
        $('#' + id).remove();
    }
});

我现在需要杀死为删除的元素创建的计时器。

这样做的最佳方式是什么?

3 个答案:

答案 0 :(得分:1)

window.setInterval返回超时句柄。您可以使用它来停止超时:

var handle = window.setInterval(function() {
    window.clearInterval(handle);
}, 1000);

希望有所帮助。

答案 1 :(得分:1)

不清楚如何清除它们,所以我最后在这里完成它们。

$(document).ready(function () {
    $('.refresh').each(function () {
        var element = $(this);
        var url = element.data('url');
        var interval = element.data('interval');
        var showLoading = element.data('show-loading');
        var preloaderID = element.data('preloader-id');

        if (typeof showLoading === 'undefined' || showLoading === null) {
            showLoading = true;
        }

        (function (element, url, interval) {

            var timerid = window.setInterval(function () {

                if (showLoading) {
                    $('#' + preloaderID).show();
                }

                $.ajax({
                    url: url,
                    type: "GET",
                    global: showLoading,
                    success: function (data) {
                        element.html(data);

                        if (showLoading) {
                            $('#' + preloaderID).hide();
                        }
                    }
                });

            }, interval);
            element.data("timerid",timerid );//add the timerid
        })(element, url, interval);
    });
    $.ajaxSetup({
        cache: false
    });
    $('.refresh').each(function () {
       var timerId = $(this).data("timerid");
       window.clearInterval(timerId);
    });
});

示例:点击

删除计时器
$('.refresh').on('click', function () {
    var timerId = $(this).data("timerid");
    window.clearInterval(timerId);
});

答案 2 :(得分:0)

这是一个间隔和"间隔刺客"的小演示。这是一个最小的例子,展示了如何以JavaScript-y方式清除间隔。



$('.start').click(function() {
    var $parentRow = $(this).closest('tr')
    var $stop = $parentRow.find('.stop')
    var $val = $parentRow.children('.val')
    
    // interval
    var iid = setInterval(function() {
        $val.text(+$val.text() + 1)
    }, 10)
    console.log(`New Target: ${iid}`)
    
    // interval assassin
    $stop.click(function() {
        clearInterval(iid)
        console.log(`Interval[${iid}] has been assassinated.`)
        $(this).off('click')
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><button class="start">Start</button></td>
        <td><button class="stop">Stop</button></td>
        <td class="val">0</td>
    </tr>
    <tr>
        <td><button class="start">Start</button></td>
        <td><button class="stop">Stop</button></td>
        <td class="val">0</td>
</table>
&#13;
&#13;
&#13;

只需运行代码段即可查看演示。如果您有任何疑问,请随时发表评论。您可以通过重复按开始设置多个间隔,只需单击一次停止即可立即清除它们。