使用作用域安全的方式进行jQuery Ajax调用

Question

我的直觉告诉我，如果我在一个延迟较高的服务器上，并且用户在成功函数上快速触发了两个事件，那么c将成为最近事件的值，导致func1使用错误的值。 <---这只是一个猜想，我还没有证明它。这只是一种感觉。

我如何确保在调用func1时使用正确的值？我不希望将c发送到服务器，也不知道如何序列化数据并重新反序列化回来。我该如何使这段代码更安全？

$('.blah').click(function (event) {
    var c = $(this).closest('.comment');
    ...
    $.ajax({ url: "/u", type: "POST", dataType: "json", data: { ... },
        success: function (data) {
            func1(c. data.blah);//here

- user34537

Answer 1

onclick回调函数中的this关键字指的是触发点击事件的元素。

这意味着变量c将始终是最接近的.comment元素。例如，如果您快速点击5个不同的.blah元素，它将触发5个ajax调用，并且所有5个成功回调都将具有在其中定义该作用域的适当范围。

因此，这样做是安全的，因为在success回调函数中复制了包含c的作用域。欢迎来到JavaScript闭包的强大功能。

- Luca Matteis

Answer 2

我尝试了类似的东西...

这是示例标记

<div id="links"><a href="#">link1</a><a href="#">link2</a></div>

那么这就是 jQuery 代码

$('#links').click(function(e) {
        var link = $(e.target).closest('a');
        if ( link.length ) {
            setTimeout(function() {
                console.log(link.text());
            }, 2000);
            return false;
        }
    });;

我认为你的"c"变量仍然会有正确的值。在这个例子中，即使在2秒超时之前同时点击两个链接，我仍然得到了两个控制台日志“link1”和“link2”。

希望这可以帮助你。

- ricecake5

Answer 3

一个简单的测试：

var i = 0;

var f = function() {
  var c = ++i;
  setTimeout(function() {
    alert(c);
  }, i*1000);
}

f();
f();
f();

// alerts 1, 2 and 3 after a little delay

显示你的直觉是错误的。

- Tgr