javascript - 让 setTimeout 工作

Question

我有以下使用 Jquery UI 拖放的代码。当项目被放入该区域时，放置区变为公司 Logo ，然后我想要延迟并重定向到放置链接中的 URL。

我可以获得要更改的 Logo 或要重定向的 url，但不能同时更改两者，当我同时设置这两个时，不会发生延迟，并且重定向会开始。我假设我在 setTimeout 上做错了什么。

代码如下:

// let the trash be droppable, accepting the gallery items
$( "#droparea" ).droppable({
  accept: "ul.gallery > li a",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {

      var thelink = $(ui.draggable).attr("href");
      $('#droparea').prepend('<img id="theImg" src="../img/logo_navigation.jpg" />');

      setTimeout(redirectLink(url),5000);
  }
});

// URL REDIRECT FUNCTION
function redirectLink(url)
{
   window.location.replace(url);
}

Answer 1

解释

您需要将函数引用(或一串 JavaScript 代码)传递给 setTimeout，以便在达到超时时执行它。

在您的代码中，您正在立即调用该函数(它不会返回任何东西，因此它的返回值为未定义。 ..所以当达到超时时什么都不会执行)。

方法一

使用运行代码的匿名函数:

setTimeout(function () {
    redirectLink(url);
}, 5000);

function redirectLink(url) {
   window.location.replace(url);
}

方法二

让您的 redirectLink 函数返回一个函数并像您原来那样调用它:

setTimeout(redirectLink(url), 5000);

function redirectLink(url) {
    return function () {
        window.location.replace(url);
    };
}

方法三

你可以使用 .bind():

setTimeout(redirectLink.bind(null, url), 5000);

function redirectLink(url) {
   window.location.replace(url);
}

请注意，.bind() 需要为某些较旧的浏览器提供 polyfill。

---

引用资料:

• 设置超时:https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
• Function.prototype.bind:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind