I have the following code which uses Jquery UI Drag and Drop. When the item is dropped into the area, the drop zone changes into the pany logo, then I want a delay and a redirect to the URL within the dropped link.

I can get the logo to change OR the url to redirect but not both, when I have both setup the delay doesn't happen and the redirect goes start away. I assume I am doing something wrong with the setTimeout.

Code is as follows:

// 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);
}

I have the following code which uses Jquery UI Drag and Drop. When the item is dropped into the area, the drop zone changes into the pany logo, then I want a delay and a redirect to the URL within the dropped link.

I can get the logo to change OR the url to redirect but not both, when I have both setup the delay doesn't happen and the redirect goes start away. I assume I am doing something wrong with the setTimeout.

Code is as follows:

// 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);
}

• javascript
• jquery
• jquery-ui
• jquery-draggable
• jquery-droppable

Share Improve this question Follow asked May 15, 2013 at 21:12 sluggerdogsluggerdog 84344 gold badges1212 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Explanation

You need to pass a function reference (or a string of JavaScript code) to setTimeout, in order for it to be executed when the timeout is reached.

In your code, you were immediately calling the function (which doesn't return anything anyways, so its return value is undefined...so nothing will execute when the timeout is reached).

Approach 1

Use an anonymous function that runs your code:

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

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

Approach 2

Make your redirectLink function return a function and call it like you originally did:

setTimeout(redirectLink(url), 5000);

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

Approach 3

You could use .bind():

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

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

Note that .bind() requires a polyfill for some older browsers.

---

References:

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