我有一系列带有锚点的div
标签,点击后,向下滑动一个用AJAX填充的面板。代码看起来像这样:
$('.details').click(function(e) {
$this = $(this).parents('.container');
var id = $this.data('id');
$(this).slideToggle('slow', function() {
if ($(this).is(":visible")) {
$.ajax({
type: 'POST',
url: '/method',
data: { id: id },
timeout: 5000
}).done(function(result){
console.log('Done was fired.');
console.log($this);
// This is my headache:
// Using $this here to do some stuff
}).fail(function(jqXHR, textStatus, errorThrown){
console.log('Fail was fired.');
console.log(jqXHR, textStatus, errorThrown);
});
如果我快速点击两个链接,第一个开始,然后在它完成之前,第二个开始,覆盖这一行:$this = $(this).parents('.container');
,这最终给人的印象是ajax永远不会完成。如何确保我能够访问正确的$this
?我应该继续查询DOM,还是使用某种变量,变量名?
答案 0 :(得分:3)
因为它是一个全局变量!
$('.details').click(function(e) {
$this = $(this).parents('.container');
^^^
No var
添加var
以使其具有本地范围,而不会被覆盖
$('.details').click(function(e) {
var $this = $(this).parents('.container');
^^^
答案 1 :(得分:1)
在函数中使$this
成为局部变量,而不是页面中的全局变量:
var $this = $(this).parents('.container');
通过在函数中本地声明变量,对函数的每次调用都会获得自己的变量。当AJAX调用的回调函数使用变量时,它使用闭包中捕获的局部变量作为回调函数,而不是全局变量。