Javascript 清除类应用的设置超时。创建超时的每个操作

很抱歉，这个标题可能没有多大意义。我不知道该怎么说我在做什么

我有一个类，我添加到使用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();
    }
});

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

---

执行此操作的最佳方法是什么？

窗口。setInterval

返回超时句柄。您可以使用它来停止超时：

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

---

希望这能有所帮助。

不清楚如何清除它们，所以我最后都在这里做了

$(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);
});

---

这里有一个间隔和“间隔刺客”的小演示。这是一个展示如何以JavaScript-y方式清除间隔的最小示例

$（'.start'）。单击（函数（）{
var$parentRow=$（this）.closest（'tr'）
var$stop=$parentRow.find（'.stop'））
var$val=$parentRow.children（'.val'））
//间歇
var iid=setInterval（函数（）{
$val.text（+$val.text（）+1）
}, 10)
log（`newtarget:${iid}`）
//间歇刺客
$stop.click（函数（）{
净间隔（iid）
log（`Interval[${iid}]已被暗杀。`）
$（此）.off（'单击'）
})
})

开始
停止
0
开始
停止
0

既然这些都是在一个each循环中完成和设置的，那么跟踪每个创建的、可以从另一个函数调用以删除计时器的循环的最佳方法是什么？将句柄添加到元素的

data

属性中？循环应该无关紧要，因为您在一个闭包中，它可以处理自己的超时句柄。否则，您可以记住它所用于的元素的句柄（例如数据属性），或者可以将对元素和句柄的引用存储在全局可访问的数组中（尽管我不建议使用全局变量）。