I'm trying to make a wall post like Facebook. I need to refresh the content div after every ten seconds and the div shouldn't refresh while the user is typing a comment. The content is reloading but is not stopping. Actually, I want to stop it when i click id = 'comments_option'.
I tried this and called the function reload(uid) at $(document).ready
var intervalId = null;
function reload(uid) {
intervalId = setInterval(function () {
var ol = $('#home_list');
var start = ol.children().length;
$.post('ajax/reloadhome.php', {
uid: uid,
start: start
}, function (data) {
$('#buzzfetch ul').html(data);
});
}, 5000);
$('#comments_option').click(function () {
clearInterval(intervalId);
});
}
Use on as opposed to click:
$("#comments_option").on("click", function () {
clearInterval(intervalId)
});
Because #comments_option is inside of #buzzfetch ul, the click event will only be bound to the first instance of #comments_option when using click. It will not bind to any further instances.
See this answer for further explanation on the differences between bind and on
Related
I want to run the function continuously. But it only works first time properly. Is there any solution for working this function continuously?
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
}, 15000);
});
If the code inside the setInterval takes longer than the time you have set it will create another process before the function finishes messing everything up. So choosing setTimeout is actually better.
To make a function loops in setTimeout use a following syntax:
function function1() {
// something here
}
function runner() {
function1();
setTimeout(function() {
runner();
}, time);
}
runner();
Given the comment under the question explaining your goal:
I want to trigger a button to show a div after 15 secs when the page is loaded, and 50 secs later another trigger for closing the div. & I want to run this continuously
I would suggest that you chain setTimeout() calls instead of using setInterval() which will cause the events to overlap and become a mess. I'd also suggest that you call show() and hide() directly on the required elements instead of faking click events in the DOM. Try this:
function openBand() {
$('#yourElement').show();
setTimeout(closeBand, 50000);
}
function closeBand() {
$('#yourElement').hide();
setTimeout(openBand, 15000);
}
$(document).ready(function() {
setTimeout(openBand, 15000);
// or just call closeBand() here directly, if the element starts as hidden
});
You should change your current function with this one
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
}, 15000);
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
});
The program needs to notify when input is changed. Below is my code :
$(document).ready(function(){
var myfunction = setInterval(function(){
$('input').change(function(){
});
$.post("getvalue.php",function(callback){
$(notify.createNotification("NOTIFICATION", {body:"<?php echo $arrb; ?>", icon: "../src/func/notif/icon.jpg"})).html(callback);
});
clearInterval(myfunction) },1000);
});
Use change event handler, you've just bound the change event handler but you're not doing anything when the event occur.
Call function notify when the value of input is changed
There is no need of using setInterval
If you want to use setInterval use setTimeout instead of setInterval as you're clearing it when the callback is called.
Don't use callback as the name of the response variable, use it as response(for better naming convention)
Ex:
var interval = setInterval(function () {
clearInterval(interval);
}, 1000);
Is equivalent to
setTimeout(function () {
}, 1000);
Code:
$(document).ready(function () {
function notify() {
$.post("getvalue.php", function (response) {
$(notify.createNotification("NOTIFICATION", {
body: "<?php echo $arrb; ?>",
icon: "../src/func/notif/icon.jpg"
})).html(response);
});
}
$('input').change(notify);
});
Take the .change handler out of the set interval and call it once you have created your input in the DOM, typically on page load is fine so your script should look something like this:
$(document).ready(function () {
$('input').change(function () {
console.log("any input changed because I hooked all input elements on my page");
});
var myfunction = setInterval(function () {
$.post("getvalue.php", function (callback) {
$(notify.createNotification("NOTIFICATION", {
body: "<?php echo $arrb; ?>",
icon: "../src/func/notif/icon.jpg"
})).html(callback);
});
clearInterval(myfunction);
}, 1000);
});
I'm not sure what your notify function is supposed to do, but it doesn't look much correct other than it will get called once after 1000ms when the page is ready.
Goodluck.
$(document).off("click", "#main").on("click", "#main", function () {
that = $(this);
$('loading').show();
Delay = setInterval(function () {
getMenu(that.attr("menu_id"));
}, 1000);
});
How can I temporary switch off the event event for #main? because if not #main is clickable during the loading, and caused my function to execute multiple times.
You can use a class to make it off like
$(document).off("click.main").on("click.main", "#main:not(.disabled)", function () {
var that = $(this);
$('loading').show();
Delay = setInterval(function () {
getMenu(that.attr("menu_id"));
}, 1000);
});
here if the #main has a class called disabled the click handler will not get executed.
So when you want to disable click add the class disabled and when you want to enable it back remove the class
I the given code, I am using setInterval() and clearInterval() methods.
Here are two buttons for setInterval() and two for clearInterval(), if I click both setInterval() buttons, then the clearInterval() buttons doesn't work.
HTML:
<div id="a"></div>
<button id='bt1'>start</button>
<button id='bt2'>Stop</button>
<button id='bt3'>Start</button>
<button id='bt4'>Stop</button>
Javascript:
var Graph = {
graph: null,
start: function (i) {
this.graph = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function () {
window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
Graph.start(1);
});
$('#bt2').click(function(){
Graph.stop();
});
$('#bt3').click(function(){
Graph.start(1);
});
$('#bt4').click(function(){
Graph.stop();
});
Fiddle: Fiddle
As the other answers, the first timer ID is overwritten. Try to store the IDs separately in an array or at least as separate variable names. Here is one adjustment using an array:
var Graph = {
graph: [0, 0], /// turn this into an array
start: function(id, i) { /// add a new parameter here
this.graph[id] = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function (id) { /// add parameter here as well
window.clearInterval(this.graph[id]);
}
};
$('#bt1').click(function(){
Graph.start(0, 1); /// set index 0 with this timer id
});
$('#bt2').click(function(){
Graph.stop(0); /// stop using id at index 0
});
$('#bt3').click(function(){
Graph.start(1, 1); /// etc.
});
$('#bt4').click(function(){
Graph.stop(1);
});
Your i variable may be subject to the same thing depending on what you try; I haven't addressed that here.
Hope this helps.
You only have a single variable to store the result of both calls to setInterval, i.e. you are overwriting it on the second call so the first timer can't be cleared.
The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar = setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.
You can also refer to this answer
If you click the #bt1 button and then the #bt3 button, the second start() function call will overwrite the graph variable in the Graph object. So the ID value returned by first setInterval() call is lost, you cannot clear the first timer.
Just put the following line of code before the setInterval() call in the start() method. This will stop the previous running timer:
if (this.graph) { this.stop(); }
Like this:
var Graph = {
graph: null,
start: function (i) {
if (this.graph) { this.stop(); }
this.graph = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function () {
window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
Graph.start(1);
});
$('#bt2').click(function(){
Graph.stop();
});
$('#bt3').click(function(){
Graph.start(1);
});
$('#bt4').click(function(){
Graph.stop();
});
I wanted to add a "loading" class to the body element on every ajax call that takes more than 300ms.
so I added the following script to my common.js file:
$(document).ready(function ()
{
var timer;
$("body").on({
ajaxStart: function ()
{
var body = $(this)
var timer = setTimeout(function ()
{
body.addClass("loading");
}, 300)
},
ajaxStop: function ()
{
$(this).removeClass("loading");
clearTimeout(timer);
}
});
});
Now this works if i make the ajax calls at leas 1sec long.
When they are immediate the loading class remains on the body element.
I suspect that the first the ajax call ends before 300ms expires that calls for removing the class and clearing the timer, lets say this takes 10ms, but then the timer the fires after 290ms more...
I wonder how could i test for that?
and weather I'm doing something wrong to achieve the described above task.
P.S
I'm using ASP.NET MVC.
You're redeclaring the variable, loosing the higher scope of the previously declared variable:
$(document).ready(function () {
var timer;
$(document).on({
ajaxStart: function () {
var body = $(document.body);
timer = setTimeout(function () { //don't use the "var" keyword
body.addClass("loading");
}, 300)
},
ajaxStop: function () {
clearTimeout(timer);
$(this).removeClass("loading");
}
});
});