jQuery 使用 $(this) 作为 setInterval/setTimeOut 函数内的起点遍历 DOM？

Question

我一直在尝试了解如何（在 jQuery 中）使用 $(this) 作为 setInterval/setTimeOut 函数中的起点来遍历 DOM，并且遇到了一些我觉得莫名其妙的行为。

似乎不可能使用 $(this) 作为 setInterval/setTimeOut 函数内的起点来遍历 DOM

为什么会这样？
jQuery/javaScript 人 - 开始吧。

用于说明行为的示例代码：

jQuery：

// set this code anywhere (inside/outside - document.ready/named-function/...) and run it
var autoTimer = setInterval(function(){
    // INSERT EXAMPLE TEST-CODE FROM BELOW HERE
}, 10000)

已尝试测试代码：

// from inside the setInterval/setTimeOut function above
// if $(this)
if($(this).length !== 0) {
    alert('hello');
} // alerts hello

// from inside the setInterval/setTimeOut function above
// if html-tag (body/head/html)
if($('body').length !== 0) {
    alert('hello');
} // alerts hello

// from inside the setInterval/setTimeOut function above
// if className
if($('.className').length !== 0) {
    alert('hello');
} // alerts hello

// from inside the setInterval/setTimeOut function above
// if id
if($('#id').length !== 0) {
    alert('hello');
} // alerts hello

所以它可以很好地找到文档中的特定元素，除了 $(this) 你可以从那里遍历 DOM

即。

// from inside the setInterval/setTimeOut function above
if ($('.className').find(something).length !== 0)... // works just fine

当你想使用 $(this) 作为起点进行遍历时，问题就来了

尝试以$(this)为起点遍历测试代码：

// from inside the setInterval/setTimeOut function above
// traversing up the DOM
if($(this).parents('body').length !== 0) {
    alert('hello');
} // no alert (same with closest/parentsUntil/etc up the DOM)

// from inside the setInterval/setTimeOut function above
// traversing sideways in the DOM
if($(this).siblings('body').length !== 0) {
    alert('hello');
} // no alert (same with next/prev/etc sideways in the DOM)

// from inside the setInterval/setTimeOut function above
// traversing down the DOM
if($(this).find('body').length !== 0) {
    alert('hello');
} // no alert (same with children down the DOM)

因此，从 $(this) 'body'（或其他任何东西）开始似乎不存在任何地方（向上/向下/横向），从上面的任何其他起点来看都是不正确的

我也尝试使用命名的全局函数，如下所示：

// set outside/inside document.ready
function testCode() {
    // INSERT EXAMPLE TRAVERSING TEST-CODE FROM ABOVE HERE
}

// set this code anywhere (inside/outside - document.ready/named-function/...) and run it
var autoTimer = setInterval(testCode, 10000) // no alert

// set this code anywhere (inside/outside - document.ready/named-function/...) and run it
var autoTimer = setInterval(function(){
    testCode();
}, 10000) // no alert

所以重申我的问题：
为什么在 jQuery 中使用 $(this) 作为起点来遍历 setInterval/setTimeOut 中的 DOM（上/下/横向）似乎是不可能的？

还有哪些可能的黑客/变通方法/等。对于这种行为？

黑客/变通办法/等的可能非解决方案。

this answer 使用 $.proxy 仅在您使用旧版本的 jQuery 时才有效 - 但由于 as this document attests 'This API has been deprecated in jQuery 3.3'... 目前这不是一个解决方案。

bind 方法也不是，因为文档证明“从 jQuery 3.0 开始，.bind() 已被弃用”并被 on 方法取代（但我看不出我将如何使用.on() 在这里有任何效果 - 但也许这只是因为我缺乏想象力）。

Answer 1

这是一个基本的this 作用域问题，与 jQuery 关系不大。

最直接的方法是将this 分配给回调之外的另一个变量：

var that = this;

setInterval(function () {
    $(that).parents();
}, 1000);

如果你不关心 IE，或者如果你有构建过程，你可以使用箭头函数，它使用外部范围的this：

setInterval(() => {
    $(this).parents();
}, 1000);

我个人的偏好是完全避免使用 this，因为它的所有 cockamamie 行为让你非常悲伤。从您的示例中不清楚您的 this 值来自何处，但这里有一些方法可以避免它：

// inside .each()
$('a').each(function (_, el) {
    $(el).parents();
});

// inside event handler
$('a').on('click', function (event) {
    $(event.target).parents();
});