关于 javascript:setTimeout 和此绑定

setTimeout and this binding

除了切换类之外，我对使用 jquery 不是很熟悉。也就是说，我会尽量解释我的问题。我有三个div。单击其中一个后，另外两个应该翻转 90 度，然后将它们的高度降低到 0

我向 youTube 上传了一个简短的动画，向您展示最终动画的外观
https://youtu.be/4ImmHJ04d0w

所以我过于复杂的脚本现在看起来是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// Add Temporarily Class
(function($){

$.fn.extend({

addTemporaryClass: function(className, duration) {
var elements = this;
setTimeout(function() {
elements.removeClass(className);
}, duration);

return this.each(function() {
$(this).addClass(className);
});
}
});

})(jQuery);

$('.review--1').on('click', function() {
\t\t\t$('[class^=review--]').not(this).addClass('review__hidden review__square');\t
\t\t\t$('.review--2 ,.review--3, .review--4').removeClass('review__hidden');\t\t\t\t\t
\t\t});

\t\t// Animation
\t\t$('.review--1').on('click', function() {
\t\t\t
\t\t\t$('.review--2 ,.review--3, .review--4').addTemporaryClass('animate-in', 500);
\t\t\tsetTimeout(function() {
\t\t$('.review--2 ,.review--3, .review--4').addClass('flip')
\t\t\t}, 500);
\t\t\t\t\t\t\t\t
\t\t});

\t\t$('.review--2 ,.review--3, .review--4').on('click', function() {
\t\t\t$(this).removeClass('review__square');
\t\t\t$('.review--2 ,.review--3, .review--4').not(this).addTemporaryClass('animate-out', 500);
\t\t\tvar that = $(this);
\t\t\tsetTimeout(function() {
\t\t$('.review--2 ,.review--3, .review--4').not(that).removeClass('flip').addClass('review__hidden')
\t\t\t}, 500);

\t\t
\t\t\t});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.review--button {
\toverflow: hidden;
\tcolor: #aa7f6f;
\twidth: 100%;
\tfloat: left;
\theight: 50px;
\tbackground-color: lightgrey;
}

.review__square {
\tmargin: 6px 3px;
\twidth: 190px;
\theight: 190px;
\ttext-align: center;
\ttransform: rotateY(90deg);
\tperspective: 80px;
\t-webkit-perspective: 80px;
\t/* transition: height .5s ease, transform .3s ease; */
}
.review__hidden {
\theight: 0;
\tmargin: 0;
\ttransform: rotateY(90deg);
}
.animate-in {
\tanimation: flip-in .5s forwards;
}

@keyframes flip-in {
\tfrom {transform: rotateY(90deg);}
\tto {transform: rotateY(0);}
}
.animate-out {
\tanimation: flip-out .5s forwards;
}

@keyframes flip-out {
\tfrom {transform: rotateY(0);}
\tto {transform: rotateY(90deg);}
}
.flip {
\ttransform: rotateY(0);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

问题(除了我糟糕的代码)是 .not(this) 在超时内不起作用。有人可以告诉我怎么做吗？或者甚至更好地告诉我如何缓解我糟糕的代码:)

相关讨论

this 对象绑定在 JavaScript 中是易变的……也就是说，它并不总是指向同一个对象，它的绑定可以从一行代码更改为下一行。如何调用包含单词 this 的代码决定了它将绑定到哪个对象。

您是否像这样在 setTimeout 之前缓存了 this 对象引用：

1	var self = this;

然后您可以在 setTimeout 中引用 self 并且它会起作用。

Here's a checklist that you can follow to know what this will bind
to (your scenario is #3 and you can read more about it here
under the"The"this" problem" section)...

如果包含this的代码被调用：

作为对象实例的方法或属性(通过实例变量)：

1
2
3
4
5
6

var o = new Object();

//"this" will be bound to the"o" object instance
// while"someProperty" and"someMethod" code executes
o.someProperty = someValue;
o.someMethod();

通过 .call()、.apply()、.bind() 或 Array.prototype.fn 调用：

1
2
3
4

//"this" will be bound to the object suppled as the"thisObjectBinding"
someFunction.call(thisObjectBinding, arg, arg);
someFunction.apply(thisObjectBinding, [arg, arg]);
var newFunc = someFunction.bind(thisObjectBinding, arg, arg);

注意：调用回调函数(即事件处理程序)时，会在触发事件时隐式调用处理程序。在这些情况下，负责触发事件的对象成为绑定到 this.

的对象

此外，几个 Array.prototype 方法允许传递一个 thisObject，这将在方法调用期间改变绑定：

1
2
3
4
5

Array.prototype.every( callbackfn [ , thisArg ] )
Array.prototype.some( callbackfn [ , thisArg ] )
Array.prototype.forEach( callbackfn [ , thisArg ] )
Array.prototype.map( callbackfn [ , thisArg ] )
Array.prototype.filter( callbackfn [ , thisArg ] )

如果其他场景都不适用，则发生默认绑定。

3a。 "use strict" 生效时： this 是 undefined

3b.没有 "use strict" 生效：this 绑定到全局对象

** 注意：使用 eval() 也会影响 this 绑定，但作为一般最佳实践，应避免使用 eval()。

说了这么多，我不知道你为什么需要 setTimeout(如果我正确理解你的场景)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#parent { width:350px; border: 0; background:inherit;}

div {
width:100px;
height:100px;
background:#ff0;
text-align:center;
float:left;
border:1px solid black;
}

.clickedDiv {
background:#f99;
width:100%;
}

1
2
3
4
5

相关讨论

写得很好，但你忘了提及新的箭头函数 () => {}。它如何将上下文绑定到调用范围。 (本质上与手动调用 .bind() 相同。
很好的答案，谢谢。我需要超时，因为停留的 div 也会转换为宽度：100%。因此，如果所有动画同时发生，停留 div 会强制淡入淡出的 div 在它们离开之前切换行。那看起来很乱。所以我的想法是有一个类将离开的 div 翻转 90 度，在这个动画完成后，高度：0 类，这样它们就不会阻止即将到来的 div。你明白我的意思吗？
@SinanAl-Kuri 即便如此，您也不需要 setTimeout ，因为 JQuery 动画接受回调函数以在动画完成时运行。有关示例，请参阅我更新的答案。
@ste2425 我没有忘记。箭头函数实际上根本不会引起任何绑定(因此它们不像 bind)。实际上，它们只是不影响 this 绑定，因此它们不会添加到我的清单中。
@ScottMarcus 是的，您对它不绑定 this 的权利是正确的，但是它们仍然值得一提。假设他处于合规环境中，他们将完美地解决 OP 的问题(毕竟这是重点)。无需所有低于标准的替代品。 (每次我看到 var self = this 我都会哭一点：p)
@ste2425 我理解你的观点，但是(就像关于 JavaScript 的很多事情一样)，"一个人的垃圾是另一个人的宝藏"。 this 的易变性质可能会受到谴责，因此箭头函数的非 this 绑定性质将被视为"拯救恩典"。但是，this 绑定的灵活性可以作为一个特性来接受，并且将它缓存在另一个变量中也可以被视为利用该语言特性。 var self = this' 本身没有任何"不合标准"的东西。相反，它是一种常见的 JavaScript 约定。
@ste2425 事实上，在很多情况下，箭头函数可能最终不会被使用，因为所需的效果是 this 更改其绑定，同时仍保留原始 this 值，这意味着 this x22> 模式不会去任何地方 - 即使我们现在有箭头函数。
@ScottMarcus 我明白这一点，这就是为什么我如此补充你的文章。然而，箭头函数确实以更简洁的方式或至少在伪代码提供的程度上解决了 OP 的问题。它还提供针对 this 的易变性质的保护，我认为 OP 想要避免这种性质。然而，我可能完全错误的假设。不管怎样，我担心我会破坏你的答案。此外，您的第一条评论说明您如何调用它决定了 this 将是什么。它本身应该涵盖箭头功能以完成。
@ste2425 "箭头函数确实以更简洁的方式或至少在伪代码提供的范围内解决了 OP\\ 的问题"。我的评论是为了解释这仅仅是你的意见，而不是普遍的共识。 var self = this 还解决了 OP 问题，很多人会说它以一种非常自我(没有双关语)的解释方式来解决，而对于箭头函数，您只需要知道它们不会影响绑定。
@ScottMarcus 再次感谢您的详细回答。不幸的是，您的讨论远远超出了我对 JavaScript 的理解。所以我用某种智力重置来尝试它:) 由于我的所有动画都使用 css 类而不是 jquery 函数，因此 jquery 不知道我的动画的长度。因此，我需要超时在正确的时刻触发所有动画。那么你能给我一个包含两个或多个不同类的代码的简单示例，这些类以不同的延迟一个接一个地添加到 div 中吗？我真的很感谢你的帮助:)
@SinanAl-Kuri 您能否更新您的问题以包含您的相关 CSS 和 HTML？这样我就可以展示一个使用你的代码的例子。仅供参考，我们可以告诉 JQuery 动画的长度，这可能(再次)使整个过程更简单。

虽然 Scott Marcus 很好地解释了调用方法如何由于某种原因改变其 this 对象，但他不想更新他的答案以包括使用箭头函数调用方法如何影响 this对象。

直接从 MDN 引用

An arrow function does not create its own this context, so this has the original meaning from the enclosing context.

所以为了扩展马库斯的很好的答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14

正如马库斯在评论中指出的，箭头函数不是在您希望动态绑定 this 的地方使用的工具，但是如果您发现自己必须经常使用 var self = this 因为您的回调有其上下文当您不希望它重新绑定时，箭头函数可能会很有用。

无论哪种方式，它都是工具带和所有其他工具的另一个工具，

相关讨论

也许吧，你应该使用这个链接吗？ var self= $(this)

1
2
3
4
5
6
7
8
9
10
11
12

$('.review--2 ,.review--3, .review--4').on('click', function() {
$(this).removeClass('review__square');
$('.review--2 ,.review--3, .review--4').not(this).addTemporaryClass('animate-out', 500);

var self = $(this);

setTimeout(function() {
$('.review--2 ,.review--3, .review--4').not(self).removeClass('flip').addClass('review__hidden')
}, 500);

});
});

相关讨论