Question

我想将一个函数定义为remove element after x milliseconds。

jQuery.fn.extend({
  remove: function(x) {
    this.hide(x);

    //this line won't work
    //setTimeout(function(){ this.remove() }, x);
  }
});

$("button").click(function() {
  $("p").remove(600);
});

p {
  background: yellow;
  margin: 6px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
  <p>Hello</p>
  how are
  <p>you?</p>
</div>
<button>remove</button>

单击按钮后，html如下所示：

<div>
   <p style="display: none;">Hello</p>
   how are
   <p style="display: none;">you?</p>
</div>
<button>remove</button>

我的问题是：行setTimeout(function(){ this.remove() }, x);无效。我认为编译器不明白this是什么意思？

您能否让我在remove()内呼叫setTimeout功能？

Answer 1

this内的

setTimeout指的是窗口对象。

使用hide()

的完整回调

动画完成后调用的函数，每个匹配元素调用一次。

this.hide(x, function() {
  this.remove();
});

jQuery.fn.extend({
  remove: function(x) {
    this.hide(x, function() {
      this.remove();
    });
  }
});

$("button").click(function() {
  $("p").remove(600);
});

p {
    background: yellow;
    margin: 6px 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
  <p>Hello</p>
  how are
  <p>you?</p>
</div>
<button>remove</button>

Answer 2

两个问题，首先this中的setTimeout()并未引用引发点击的元素，而是引用window。您需要将this引用存储在函数体内的变量中。其次，在setTimeout内再次调用remove()，这会创建一个循环引用，仅用于创建新的超时。您需要更改函数的名称，以使remove()仍然有效。试试这个：

jQuery.fn.extend({
    delayedRemove: function (x) {
        var $el = this;
        setTimeout(function(){ 
            $el.remove() 
        }, x);
    }
});

$("button").click(function () {
    $("p").delayedRemove(600);
});

Example fiddle

Answer 3

无需使用timeout，您可以删除hide完成回调中的元素。

jQuery.fn.extend({
    remove: function (x) {
        this.hide(x, function () {
            this.remove();
        });
    }
});

jQuery - 结合.hide（）和.remove（）

3 个答案: