Disable JS Interaction Temporarily? - javascript

I want the following function to operate in a way that prevents users from spamming the mouseenter, mouseleave function, so that they can only operate the mouseenter/leave function once the fade action is complete. How would I do that?
$("#bocks").mouseenter(function(){
$("#bocks2").fadeOut(); });
$("#bocks").mouseleave(function(){
$("#bocks2").fadeIn();
});
http://jsfiddle.net/x2qNZ/

Try this:
var blocked = false;
function unblock() {
blocked = false;
}
$("#bocks").mouseenter(function(){
if (blocked) return;
blocked = true;
$("#bocks2").fadeOut(unblock);
});
$("#bocks").mouseleave(function(){
if (blocked) return;
blocked = true;
$("#bocks2").fadeIn(unblock);
});
You could also remove the event listeners and place it again in the unblock() function.

FadeIn/Fade out have completion callbacks.
http://jsfiddle.net/x2qNZ/3/
I have updated the Fiddle to disable fadeIn if we are actively fadingOut.
var isFiring = false;
$("#bocks").mouseenter(function(){
isFiring = true;
$("#bocks2").fadeOut(1000, function(){
isFiring = false;
});
});
$("#bocks").mouseleave(function(){
if(!isFiring){
$("#bocks2").fadeIn();
} else {
console.log('fire ignored');
}
});

Look at the updated fiddle
var mouseenterbusy = false;
var mouseleavebusy = false;
$("#bocks").mouseenter(function(){
if (mouseenterbusy == true) {
return;
}
mouseenterbusy = true;
$("#bocks2").fadeOut(function (){
mouseenterbusy = false;
});
});
$("#bocks").mouseleave(function(){
if (mouseleavebusy == true) {
return;
}
mouseleavebusy = true;
$("#bocks2").fadeIn(function (){
mouseleavebusy = false;
});
});
http://jsfiddle.net/x2qNZ/5/

Related

Stop JavaScript function after 3 seconds

Heyo,
I want to call a function that disables the scrollwheel while the Preloader is shown. But after the Preloader is gone, the scrollwhell should be usable again.
I got the function which disables the scrollwheel allready. Now I need a simple code which makes it run only the first 3 seconds.
My anitscrollwheel function looks like so: window.onwheel = function(){ return false; }
Try this:
<script type="text/javascript">
var wheelEnabled = false;
window.onwheel = function() { return wheelEnabled; }
setTimeout(function() {
wheelEnabled = true;
}, 3000);
</script>
You can do something like that
var enable_scroll = false;
//When preloader ends, set enable_scroll = true;
window.onwheel = function(){
if(enable_scroll == false) {
return false;
}
}

jQuery change event code not running possible event conflict

Let me start off by saying that this is my second day learning jQuery so I'm very much a beginner.
I've written a document ready function and all components are working except the countryField.change function I wrote. I'm pretty sure the web application already has a change function for this field and I'm not sure if there can be two of the same event on a field. When I say it's not working, I set a breakpoint in the Chrome debugger and it never enters the function.
Maybe I have to temporarily pause the existing event, run my code, then re-enable the default event?
Any help would be appreciated. Thanks.
$(document).ready(function(){
var submitReady = true;
var phoneField = $("p.phone").find("input");
var phoneExt = $("p.Ext").find("input");
var countryField = $("p.country").find("input");
var stateField = $("p.state").find("input");
var provinceField = $("p.Province").find("input");
var regex = /^\([2-9][0-9]{2}\)\s+[2-9][0-9]{2}\-[0-9]{4}$/;
phoneField.mask('(000) 000-0000', {placeholder: "(###) ###-####"});
phoneExt.mask('00000', {placeholder: "#####"});
$('#pardot-form').submit(function() {
// DO STUFF
if (submitReady) {
if (phoneExt.val() != "") {
phoneField.val(phoneField.val() + ' x' + phoneExt.val());
return true;
}
}
else {
return false;
}
});
phoneField.focusout(function() {
if (regex.test($(this).val())) {
submitReady = true;
return true;
}
else {
$(".form-field.phone").after( "<p class='tempError error no-label'>Please Enter a valid phone number: (###) ###-####</p>");
submitReady = false;
}
});
phoneField.focus(function() {
$(".tempError").remove();
});
countryField.change(function() {
phoneField.val("");
provinceField.val("");
stateField.val("");
submitReady = true;
});
});
You can try
$( "p.country" ).change(function() {
phoneField.val("");
provinceField.val("");
stateField.val("");
submitReady = true;
});

Confirm box on browser back button

I want to catch the event on back or refresh button of browser. I didn't found any perfect solution that catches only back event and which is compatible with all browsers. please provide some solution.
Thanks in advance.
You can use the event handler onpopstate from HTML5 history API, like this :
$(document).ready(function() {
if (window.history && window.history.pushState) {
$(window).on('popstate', function() {
//confirmation box
confirm('Back button clicked!');
});
}
});
Note that you need to have a page to go back to...
window.userInteractionTimeout = null;
window.userInteractionInHTMLArea = false;
window.onBrowserHistoryButtonClicked = null; // This will be your event handler for browser navigation buttons clicked
$(document).ready(function() {
$(document).mousedown(function() {
clearTimeout(window.userInteractionTimeout);
window.userInteractionInHTMLArea = true;
window.userInteractionTimeout = setTimeout(function() {
window.userInteractionInHTMLArea = false;
}, 500);
});
$(document).keydown(function() {
clearTimeout(window.userInteractionTimeout);
window.userInteractionInHTMLArea = true;
window.userInteractionTimeout = setTimeout(function() {
window.userInteractionInHTMLArea = false;
}, 500);
});
if (window.history && window.history.pushState) {
$(window).on('popstate', function() {
if (!window.userInteractionInHTMLArea) {
//document.location.href = "logOff.htm";
setTimeout(function(){ var answer = confirm("Are you Sure?? This will expire your session");
if(answer == true)
{
document.location.href = "logOff.htm";
}
},100 );
//alert('Browser Back or Forward button was pressed.');
}
if (window.onBrowserHistoryButtonClicked) {
window.onBrowserHistoryButtonClicked();
}
});
}
});

Error while using exit(0) in javascript

var inDoubleTap = false; // Shared across all bound elements
return $list.live('touchstart', function(e) {
if (e.originalEvent.touches.length === 1) {
if (!inDoubleTap) {
inDoubleTap = true;
setTimeout(function() { inDoubleTap = false }, delay);
} else {
inDoubleTap = false;
callback.call(this, e);
exit(0);
}
}
});
The above code shows an error if i use exit(0) in mobile browsers (iphone, ipad)
Surely you mean return; instead of exit(0). That should work.

jQuery .click function - prevent it from being called again until function completes

I've written my first bit of proper jQuery for an image slideshow, that allows users to scroll up and down through some images:
$(window).load(function(){
$('.scrollUp').click(function(){
$('.cardWrapper:visible:first').prevAll(':hidden:first').slideDown(function(){
$('.cardWrapper:visible:last').slideUp();
});
return false;
});
$('.scrollDown').click(function(){
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp();
}
else{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp();
});
}
return false;
});
});
The problem I have is that if you click very fast on the .scrollDown element link - it loses all the content as it hasn't had the time to add the extra ( i think) - and thus it starts to fail.
Is there a way to make jQuery not accept any new click on an element until its run all of this function?
Maybe something like
var scrollDownClickActive = false;
$('.scrollDown').click(function(){
if (scrollDownClickActive) return false;
scrollDownClickActive = true;
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; } );
}
else
{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; } );
});
}
return false;
});
Using a flag to determine if the function is active or not.
The use of binding and unbinding removes the use of flag variables =)
function scroller(obj){
$(obj).unbind('click');
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp();
scrollDownClickActive = false;
}
else
{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp();
scrollDownClickActive = false;
});
}
$(obj).click(function(){scroller(this);});
}
$('.scrollDown').click(function(){
scroller(this);
});
Hope this helps!
If it's clicking an button element, just have your function disable it and re-enable it in the completion callback function.
Otherwise just write your function to check for a variable value which prevents it from running. If the variable isn't set, have it set a the value (something like var busy = true;) in the handler and set it back to false in the completion callback.
You can use a flag to indicate that it is scrolling (as suggested by MiffTheFox), but you'll have to unset the flag in the slide callback because the slide happens asynchronously:
$(function(){
var scrolling = false;
function startScrolling() {
if(scrolling) return false;
return scrolling = true;
}
function scrollComplete() {
scrolling = false;
}
$('.scrollUp').click(function() {
if(startScrolling()) return false;
$('.cardWrapper:visible:first')
.prevAll(':hidden:first').slideDown(function() {
$('.cardWrapper:visible:last').slideUp(scrollComplete);
});
return false;
});
$('.scrollDown').click(function() {
if(startScrolling()) return false;
if($('.cardWrapper:last').is(':hidden')) {
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp(scrollComplete);
} else {
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function() {
$('.cardWrapper:visible:first').slideUp(scrollComplete);
});
}
return false;
});
});
Disclaimer: I haven't checked your code to see how valid it is, I've just added the flag and the callbacks for you.

Categories