.css()将不会在延迟后应用 [英] .css() won't get applied after a delay

查看:104
本文介绍了.css()将不会在延迟后应用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用jQuery的 css()来改变一个div的背景颜色,它的工作,但后来我试图添加一些延迟,一些原因它停止工作。我缺少什么?这是一个MVC:

I wanted to change the background-color on a div dinamically using jQuery's css() and it worked, but then I tried to add some delay to it, and for some reason it stopped working. What am I missing? Here's an MVC of it:

HTML:

<div id="nodelay"></div>
<div id="delay"></div>

JS:

$("#nodelay").hover(function() {
       $(this).css("background-color", 'gray');
     });

$("#delay").hover(function() {
    setTimeout(function() {
        $(this).css("background-color", 'gray');
    }, 500);
});

https: //jsfiddle.net/8eabfa2t/1/

推荐答案

MDN文档


setTimeout()是从单独的执行上下文调用 setTimeout 的函数。设置被调用函数的 this 关键字的通常规则适用,如果你没有在调用中设置这个,或者 bind 它将默认为非严格模式下的全局(或窗口)对象,或在严格模式下未定义。它不会与调用 setTimeout 的函数的此值相同。 (强调我)

Code executed by setTimeout() is called from a separate execution context to the function from which setTimeout was called. The usual rules for setting the this keyword for the called function apply, and if you have not set this in the call or with bind, it will default to the global (or window) object in non–strict mode, or be undefined in strict mode. It will not be the same as the this value for the function that called setTimeout. (Emphasis mine)

由于传递给 setTimeout 上下文,未绑定。这意味着 实际上指的是 window (或 undefined 在严格模式下)。

Since functions passed to setTimeout are executed in a different context, this is not bound. That would mean this actually refers to window (or undefined in strict mode).

此外,您还使用一个匿名函数来执行。 这个内部函数总是指向窗口,除非明确绑定。你实际上是在做 $(window).css(...)这是不打算的。

On top of that, you are also using an anonymous function to be executed. this inside functions always refers to window unless explicitly bound. You are essentially doing $(window).css(...) which is not intended.

您可以使用 Function.prototype.bind 绑定上下文。从文档:

To combat this, you may use Function.prototype.bind to bind this context as mentioned above. From the documentation:


bind()方法创建一个新函数,当被调用时,其关键字设置为提供的值

The bind() method creates a new function that, when called, has its this keyword set to the provided value

code> 外部的 setTimeout 函数是元素(因为jQuery这样做),使用 $(this)将引用 #delay 元素:

Since this outside of the setTimeout function is the element (as jQuery does this for you), using $(this) will refer to the #delay element:

$("#nodelay").hover(function() {
  $(this).css("background-color", 'gray');
});

$("#delay").hover(function() {
  setTimeout(function() {
    $("#delay").css("background-color", 'gray');
  }.bind(this), 500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nodelay">Test</div>
<div id="delay">Test</div>

或者,如上所述,您可以在输入匿名函数之前捕获,或在选择器中显式提及元素。如果您使用ES6,另一种方法是使用箭头函数,它们不绑定自己的 this ,引用包含的上下文。

You can alternatively, as mentioned, capture this before you enter the anonymous function, or explicitly mention the element in the selector. If you're using ES6, another way to do this is to use arrow functions, which do not bind their own this, referring to that of the enclosing context.

这篇关于.css()将不会在延迟后应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆