Question

我有一个小功能：

function showVotingModal(e) {

    var $collector = $("#vote-collector");

    setTimeout(function () {

        $collector.addClass("open");
    }, 5000);

    $collector.find(".description").text($(this).data("desc"));
    $collector.attr("data-id", "15");

}

我们的想法是在延迟5秒后显示#vow-collector面板，并使用面板填充一些其他数据。

以上代码有效，但下面的代码没有。

function showVotingModal(e) {

    setTimeout(function () {
        var $collector = $("#vote-collector");
        $collector.addClass("open");
        $collector.find(".description").text($(this).data("desc"));
        $collector.attr("data-id", "15");

 }, 5000);
    }

在这种情况下，＆＃39;描述＆＃39;标签没有填充。

任何人都可以了解我是否做错了什么，或者超时功能是不是这样做了？

由于

Answer 1

尝试bind外部范围setTimeout，

 function showVotingModal(e) {
    setTimeout(function () {
        var $collector = $("#vote-collector");
        $collector.addClass("open");
        $collector.find(".description").text($(this).data("desc"));
        $collector.attr("data-id", "15");
     }.bind(this), 5000);
 }

默认情况下，setTimeout this内部将被视为window。

或者您可以使用延迟后接受其他参数的setTimeout的其他签名

 function showVotingModal(e) {
    setTimeout(function (that) {
        var $collector = $("#vote-collector");
        $collector.addClass("open");
        $collector.find(".description").text($(that).data("desc"));
        $collector.attr("data-id", "15");
     }, 5000, this);
 }

Answer 2

你使用它的代码中存在一个非常小的错误，它当前指向当前的函数范围。您只需使用以下代码更新您的功能

function showVotingModal(e) {
  var self = this;
  setTimeout(function () {
    var $collector = $("#vote-collector");
    $collector.addClass("open");
    $collector.find(".description").text($(self).data("desc"));
    $collector.attr("data-id", "15");

 }, 5000);
}

Answer 3

问题应该是代码$(this).data("desc")

这将指向您使用的2个案例中的不同上下文/对象。

尝试将bind用于setTimeout。

Javascript setTimeout无法按预期工作

3 个答案: