让setTimeout工作

Question

我有以下代码使用Jquery UI拖放.当项目被放入该区域时,放置区域将更改为公司徽标,然后我希望延迟并重定向到已删除链接中的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,以便在达到超时时执行它.

在你的代码中,你立即调用了函数(它没有return任何反正,所以它的返回值是undefined......所以当达到超时时什么都不会执行).

方法1

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

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

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

方法2

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

setTimeout(redirectLink(url), 5000);

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

方法3

你可以使用.bind():

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

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

请注意,.bind()某些较旧的浏览器需要使用polyfill.

参考文献:

• setTimeout: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