javascript - stop - settimeout typescript

Cómo usar "setTimeout" para invocar el objeto mismo

Question

¿Por qué no puedo usar setTimeout en un objeto javascript?

Message = function () {
...
...
this.messageFactory = ...
this.feedbackTag = document.getElementById(''feedbackMessages'');
this.addInfo = function (message) {
var info = this.messageFactory.createInfo(message); // create a div
this.feedbackTag.appendChild(info);
setTimeout(''this.feedbackTag.removeChild(info)'', 5000);
// why in here, it complain this.feedbacktag is undefined ??????
};
}

Gracias por la Solución de Steve, ahora funcionará si el código es el siguiente ... porque "esto" antes apuntaba a la función dentro de setTimeOut, no puede buscar el Mensaje.

Message = function () {
...
...
this.messageFactory = ...
this.feedbackTag = document.getElementById(''feedbackMessages'');
this.addInfo = function (message) {
var info = this.messageFactory.createInfo(message); // create a div
this.feedbackTag.appendChild(info);
var _this = this;
setTimeout(function() { _this.feedbackTag.removeChild(info); }, 5000);
};
}

Pero por qué no funciona si hacemos esto:

Message = function () {
...
...
this.messageFactory = ...
this.feedbackTag = document.getElementById(''feedbackMessages'');
// public function
this.addInfo = function (message) {
var info = this.messageFactory.createInfo(message); // create a div
this.feedbackTag.appendChild(info);
delayRemove(info);
};
// private function
function delayRemove(obj) {
var _this = this;
setTimeout(function() { _this.feedbackTag.removeChild(info); }, 5000);
}
}

Answer 1

Intenta reemplazar esta línea:

setTimeout(''this.feedbackTag.removeChild(info)'', 5000);

con estas dos lineas:

var _this = this;
setTimeout(function() { _this.feedbackTag.removeChild(info); }, 5000);

Nota:

Nunca pase a setTimeout una cadena, ya que esto invoca a eval (que solo debe usar cuando sea necesario). En su lugar, pase setTimeout una referencia de función (esto puede ser una función anónima).

Por último, compruebe siempre que this palabra clave apunta a lo que cree que apunta (consulte http://www.alistapart.com/articles/getoutbindingsituations ).

Abordar la pregunta 2:

Creo que para las funciones normales, this se establece en el objeto de window , independientemente de dónde se declaren. Así que mover el código a una función separada no solucionaría el problema.

Answer 2

Para responder a tu última pregunta: "¿Por qué no funciona si hacemos esto?"

Message = function () {
...
...
this.messageFactory = ...
this.feedbackTag = document.getElementById(''feedbackMessages'');
// public function
this.addInfo = function (message) {
var info = this.messageFactory.createInfo(message); // create a div
this.feedbackTag.appendChild(info);
delayRemove(info);
};
// private function
function delayRemove(obj) {
var _this = this;
setTimeout(function() { _this.feedbackTag.removeChild(info); }, 5000);
}}

No funciona porque está pasando una variable no definida ( info ) en lugar de una variable definida ( obj ). Aquí está la función corregida:

function delayRemove(obj) {
var _this = this;
setTimeout(function() { _this.feedbackTag.removeChild(obj); }, 5000);}

Answer 3

Una forma más ordenada es pasar esto como un argumento a la función a la que se llama en el tiempo de espera:

function delayRemove(obj) {
setTimeout(function(_this) {
_this.feedbackTag.removeChild(obj);
}, 5000, this);
}

También deberías pasar obj como argumento, solo para asegurarte de que esté dentro del alcance (el número de parámetros es ilimitado):

function delayRemove(obj) {
setTimeout(function(_this, removeObj) {
_this.feedbackTag.removeChild(removeObj);
}, 5000, this, obj);
}

HTML5 y Node.js extendieron la función setTimeout para aceptar parámetros que se pasan a su función de devolución de llamada. Tiene la siguiente firma de método.

setTimeout(callback, delay, [param1, param2, ...])

Como setTimeout no es realmente una característica de JavaScript, sus resultados pueden variar según los navegadores. No pude encontrar ningún detalle concreto de soporte, sin embargo, como dije, esto está en la especificación HTML5.