Получение ошибки NaN

Question

Я использую jQuery .data для хранения количества кликов по элементу. Я могу добавить к значению штраф, но вычитание дает ошибку NaN. Значение только увеличивается. Как я могу это исправить?

HTML:

<div data-click="0">Click here</div> 

JS:

$("div").on("click", function(){ 
    console.log('Current: '+$(this).data('click')) 
    $(this).data('click',$(this).data('click')+1); 
    setTimeout(function(){ 
     $(this).data('click',$(this).data('click')-1); 
     console.log('After: '+$(this).data('click')) 
    },1000);   
}); 

Fiddle: http://jsfiddle.net/bhmC9/

Answer 1

Когда внутри setTimeout обратного вызова, this не имеет значения, что вы ожидаете его. Сохранить это следующим образом:

var that = this; 
setTimeout(function(){ 
    $(that).data('click',$(that).data('click')-1); 
    console.log('After: '+$(that).data('click')) 
},1000); 

На самом деле, $(this) появляется так много раз в этом фрагменте кода, что кэширование это звучит как хорошая идея. Кроме того, он также устраняет необходимость для просмотра, что this является:

var $this = $(this); 
console.log('Current: '+$this.data('click')) 
$this.data('click',$this.data('click')+1); 
setTimeout(function(){ 
    $this.data('click',$this.data('click')-1); 
    console.log('After: '+$this.data('click')) 
},1000); 

Answer 2

Вы также можете установить объем this внутри функции, как так (по телефону bind):

$("div").on("click", function(){ 
    console.log('Current: '+$(this).data('click')) 
    $(this).data('click',$(this).data('click')+1); 
    setTimeout(function(){ 
     $(this).data('click',$(this).data('click')-1); 
     console.log('After: '+$(this).data('click')) 
    }.bind(this),1000);   
});