javascript - setTimeout 和 this 绑定(bind)

Question

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

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

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

// 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() {
			$('[class^=review--]').not(this).addClass('review__hidden review__square');	
			$('.review--2 ,.review--3, .review--4').removeClass('review__hidden');					
		});

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


		$('.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 that = $(this);
  			setTimeout(function() {
        		$('.review--2 ,.review--3, .review--4').not(that).removeClass('flip').addClass('review__hidden')
    			}, 500); 

        		
			});

.review--button {
	overflow: hidden;
	color: #aa7f6f;
	width: 100%;
	float: left;
	height: 50px;
	background-color: lightgrey;
}

.review__square {
	margin: 6px 3px;
	width: 190px;
	height: 190px;
	text-align: center;
	transform: rotateY(90deg);
	perspective: 80px;
	-webkit-perspective: 80px;
	/* transition: height .5s ease, transform .3s ease; */
}
.review__hidden {
	height: 0;
	margin: 0;
	transform: rotateY(90deg);
}
.animate-in {
	animation: flip-in .5s forwards;
}



@keyframes flip-in {
	from {transform: rotateY(90deg);}
	to {transform: rotateY(0);}
}
.animate-out {
	animation: flip-out .5s forwards;
}



@keyframes flip-out {
	from {transform: rotateY(0);}
	to {transform: rotateY(90deg);}
}
.flip {
	transform: rotateY(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review--button review--1">
				<i>1</i>
			</div>

			<div class="review--button review__square review--2 review__hidden">
				<i>2</i>
			</div>

			<div class="review--button review__square review--3 review__hidden">
				<i>3</i>
			</div>

			<div class="review--button review__square review--4 review__hidden">
				<i>4</i>
			</div>

			<div class="review--button review__square review--5 review__hidden">
				<i>5</i>
			</div>

			<div class="review--button review__square review--6 review__hidden">
				<i>6</i>
			</div>

			<div class="review--button review__square review--7 review__hidden">
				<i>7</i>
			</div>

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

Answer 1

this 对象绑定(bind)在 JavaScript 中是不稳定的...也就是说，它并不总是指向同一个对象，并且它的绑定(bind)可以从一行代码更改为下一行。 调用包含单词this的代码的方式决定了它将绑定(bind)到哪个对象。

您是否在 setTimeout 之前缓存了 this 对象引用，如下所示:

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. 作为对象实例的方法或属性(通过实例变量):

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

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

   // "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);
   

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

   此外，几个Array.prototype方法允许传递thisObject，这将改变方法调用期间的绑定(bind):

   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 ] )
   

3. 如果其他情况均不适用，则发生默认绑定(bind)。

   3a。当“use strict”生效时:this是未定义

   3b。如果“use strict”生效:this绑定(bind)到全局对象

** 注意:this 绑定(bind)也可能受到使用 eval() 的影响，但作为一般最佳实践，使用 eval() 应避免。

话虽如此，我不确定为什么你需要 setTimeout (如果我正确理解你的场景):

var divs = document.querySelectorAll("div:not(#parent)");

divs.forEach(function(div){
  div.addEventListener("click", function(){
    
    var self = this;
    
    // get other two divs, not this one
    var $otherDivs = $(divs).not(this);
    
    // Fade them out:
    $otherDivs.fadeOut(function(){
       // JQuery animations accept a callback function to run when the animation is complete
       $(self).addClass("clickedDiv");
    });
  });
});

#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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
   <div>I'm DIV 1</div>
   <div>I'm DIV 2</div>
   <div>I'm DIV 3</div>
</div>