How to stop clearQueue() from clearing in-future queues?

I have a button, upon clicking on which a div is shown in 500ms and then after 500ms class shake is added onto that div. This shake classe is then removed after 2 seconds with delay. What I want is if user keep pressing on button then all callbacks become canceled except the last one.

Problematic code if click is pressed many time:

$("button").click(function() {    $(".content").show({      duration: 500,      done: function() {        $(".content").addClass("shake");        var time = parseFloat($(".content").css("transition-duration")) * 1000;               $(".content").delay(time).queue(function() {          console.log("shake");          $(".content").removeClass("shake");          $(".content").dequeue();        });      }    })  });

div.content {    border: 1px solid red;    transition: background-color 2s ease-out;    background-color: black;    display: none;  }    div.content.shake {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button>click</button>  <div class="content">Content</div>

My solution with clearQueue:

$("button").click(function() {    $(".content").show({      duration: 500,      done: function() {        $(".content").clearQueue();        $(".content").addClass("shake");        var time = parseFloat($(".content").css("transition-duration")) * 1000;               $(".content").delay(time).queue(function() {          console.log("shake");          $(".content").removeClass("shake");          $(".content").dequeue();        });      }    })  });

div.content {    border: 1px solid red;    transition: background-color 2s ease-out;    background-color: black;    display: none;  }    div.content.shake {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button>click</button>  <div class="content">Content</div>

But this method never lets the shake class to be added. Because the queue mentioned after clearQueue is also cleared.

How can I prevent clearQueue() from clearing in-future queues? And why does clearQueue() behave this way? How does it know what queue would be added in future?

2 Answers

Answers 1

Provide a name for the .delay() and .queue() calls. Check if .content .queue(queueName) has a .length before setting .delay(time, queueName). Chain .dequeue(queueName) to .queue(queueName) call instead of calling .dequeue() within .queue() function. Note that .delay() also adds a function to element .queue() array

$("button").click(function() {    $(".content").show({      duration: 500,      done: function() {        $(".content").clearQueue();        $(".content").addClass("shake");        var time = parseFloat($(".content").css("transition-duration")) * 1000;        if (!$(".content").queue("shake").length)        $(".content").delay(time, "shake").queue("shake", function() {          console.log("shake");          $(".content").removeClass("shake");        }).dequeue("shake");      }    })  });

div.content {    border: 1px solid red;    transition: background-color 2s ease-out;    background-color: black;    display: none;  }    div.content.shake {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button>click</button>  <div class="content">Content</div>

Answers 2

Note: this solution uses a different method than clearQueue().

As mentioned in the comments, there might be better options for achieving the effect you want. It sounds like you're trying to keep the shake class enabled for X seconds after the last button press.

We can accomplish this with setTimeout(), which executes a function after a specified amount of time. In this cause, we'll have our setTimeout() callback function remove the .shake class after time seconds.

To keep the .shake class enabled when the button is clicked we only need to 'reset' the setTimeout function. We can do this by clearing the timeout, using clearTimeout, then recreating it. This is accomplished by assigning the setTimeout function to a variable, which we pass to clearTimeout to clear it, then recreate the timeout.

The effect will be that the function to remove the .shake class will run time seconds AFTER the last time the button is clicked.

var remover;    $("button").click(function() {    $(".content").show({      duration: 500,      done: function() {        if (remover) {            clearTimeout(remover);        }                $(".content").addClass("shake");        var time = parseFloat($(".content").css("transition-duration")) * 1000;           remover = window.setTimeout(function(){          console.log("removing shake");          $(".content").removeClass("shake");        }, time)      }    })  });

div.content {    border: 1px solid red;    transition: background-color 2s ease-out;    background-color: black;    display: none;  }    div.content.shake {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button>click</button>  <div class="content">Content</div>

Read More

async queue never triggers drain randomly

Hello StackOverflow community,

I'm continuing to play around with nodejs. So below is a brief summary of my launch.js app

var counter = 0; var queue = async.queue(function(objectWithVariousProperties, callback) {     methodDoingVariousAsynchronousStuff(objectWithVariousProperties.link, function(err,result)          counter++;         callback();     }); }, 20);  queue.drain = function() {     log.debug("Finished Queue", {         "Objects processed" : counter     }); }; //TO various iterations over several array and construct some object and then push them in the queue via  queue.push(media_object) 

My issue is that 80% of the time the process works. the application launch via the shell command nodejs launch.js , process the queue, when queue is finished it displays the 'Finished Queue' then back to shell.

However, sometimes the drain event is never triggered but the application finished and back to the shell without any exception. I inspected during several hours my code to find if there was a missing callback, but it does not seems so.

Any idea which can explain this strange random behaviour ? Or any tools which would help to find the leaking code ?

As I said, sometimes, the queue process more than 10000 objects without any problem and sometimes when I launch it, it just does not trigger the drain event but the process stop (again without any exception or error or anything, just a normal stop)

I spent a couple of evenings trying to figure out why, so if you guys had any ideas it would be gladly welcomed.

Thanks in advance for your feedbacks and I wish you a very nice day,

Anselme

2 Answers

Answers 1

I cannot give you an appropriate answer, but help you to debug your code instead. When node.js is not exiting, there's something left in the event loop.

This tool may help you to find it: https://github.com/mafintosh/why-is-node-running

I'm pretty sure that your problem may belong to something in methodDoingVariousAsynchronousStuff() - the async.queue code looks almost fine.

Maybe something like an uncalled callback, unhandled error or an open network connection.

Answers 2

As I see, you don't catch some error. Can you add to your code:

process.on('uncaughtException', function(error) {     console.log(error); }); 

I hope it will help you find the problem. More info you can read in the doc.

Read More

What would prevent jobs in a queue from processing? [PHP / Laravel 5]

I have a queue I set up in Laravel 5 to delete companies and associated records. Each time this happens, a lot of work happens on the back-end, so queues are my best option.

I set up my config/queue.php file along with my .env file so that the database driver will be used. I am using the Queue::pushOn method to push jobs onto a queue called company_deletions. Ex.

Queue::pushOn('company_deletions', new CompanyDelete($id)); 

Where CompanyDelete is a command created with php artisan command:make CompanyDelete --queued

I have tried to get my queue to process using the following commands:

php artisan queue:work php artisan queue:work company_deletions php artisan queue:listen php artisan queue:listen company_deletions php artisan queue:work database php artisan queue:listen database 

Sometimes when looking at the output of the above commands, I get the following error:

[InvalidArgumentException]   No connector for []   

Even when I don't get an error I cannot get it to actually process the jobs for some reason. When I look in my jobs table, I can see the job on the queue, however the attempts column shows 0, reserved shows 0 and reserved_at is null. Am I missing some steps? I have looked over the documentation several times and cannot for the life of me figure out what is wrong. I don't see anything in the laravel error logs either. What would prevent these jobs from being processed once they are in the jobs database? Any help is appreciated.

0 Answers

Read More