Изменить цвет фона через X секунд при вводе данных

Question

У меня есть contenteditable div, и когда вы набираете его, через 2 секунды я пытаюсь изменить его цвет фона.

Это мой код:

function changeFn(){
      $(this).css('background','red')
      console.log($(this).attr('id'));
   } 
var timer;

    $("div.content").on("keypress paste", function () { 

        clearTimeout(timer);
          timer = setTimeout(changeFn, 2000)
    });

Кажется, я должен передать $ (this) функции, потому что она не распознает, что это $.

Когда я устанавливаю изменение цвета фона внутри функции нажатия клавиш, оно работает.

jsFiddle: http://jsfiddle.net/uc8Tg/

Answer 1

Используйте jQuery.proxy, который задает контекст функции:

function changeFn() {
    $(this).css('background', 'red');
}
var timer;

$("div.content").on("keypress paste", function() {

    clearTimeout(timer);
    timer = setTimeout($.proxy(changeFn, this), 2000);
});

Пример: http://jsfiddle.net/uc8Tg/1/

Answer 2

function changeFn(){
    $(this).css('background','red')
    console.log($(this).attr('id'));
} 
var timer;
$("div.content").on("keypress paste", function () { 
    clearTimeout(timer);
    var self = this;
    timer = setTimeout(function(){changeFn.call(self)}, 2000)
});

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call