We Keep Coding

Javascript automatic datagrid reload

In my DotNet Core web application I have the following snippet of javascript:
<script type="text/javascript">
setTimeout(function () {
$("#gridContainer").dxDataGrid("refresh");
}, 5000);
</script>
What I want to happen, is every 30 seconds I want my projects datagrid to refresh. I don't want the whole page to reload, only the datagrid. The line that does this is:
$("#gridContainer").dxDataGrid("refresh");
However, when I place it in the setTimeout this only gets called once. When I want it to be called every 30 seconds.
Could someone please enlighten me as to what I'm doing wrong, and what the best way to achive this would be?
The refresh needs to happen automatically and not on a button press.

For repeating, you should use setInterval():
setInterval(function () {
$("#gridContainer").dxDataGrid("refresh");
}, 5000);
setTimeout(function, milliseconds) -> Executes a function, after waiting a specified number of milliseconds.
setInterval(function, milliseconds) -> Same as setTimeout(), but repeats the execution of the function continuously.

javascript run function after animation frame renders

Based on what I understand you need 60fps on your animations to make the animations appear smooth. Basically what I'm trying to do is to do the heavy calculations at the start of the frame so by the time the rendering is actually going to happen there won't be much work left to do.
I understand you can use window.requestAnimationFrame to run a function right before the screen is redrawn. But that will cause a jerking effect if the function takes a long time. Is there a way to run a function right after the screen has done a repaint?
I tried something like this but its miss and hit:
window.requestAnimationFrame(do_before);
do_before(){
window.setTimeout(do_after, 1);
}
do_after(){
//code to execute after animation frame
}
As you can see in the picture below the do_after code is still executing in the same frame and because of this I sometimes get long frames:
Link to image
Is there a way to make do_after() run after the screen has finished drawing itself?
Thanks in advance

Actually, the code from you question is right. setTimeout(do_after) is enough in Chrome and Safari (I haven't tested in other browsers). It makes the browser execute the function when the browser is free of other tasks.
If you want to delay the execution from inside a requestAnimationFrame callback, just call setTimeout(do_after) and the callback will be executed right after the frame flush:
requestAnimationFrame(() => {
do_before();
setTimeout(do_after);
});
If you want to delay the execution from another place (e.g. a click handler or an AJAX response handler), call requestAnimationFrame first and then setTimeout:
document.addEventListener('click', () => {
do_before();
requestAnimationFrame(() => {
setTimeout(do_after);
});
});
Unfortunately I haven't found a universal way to execute a callback right at the start of the next frame because there is no straightforward way to know if a code is executed inside a requestAnimationFrame handler. You may use a trick to solve it
If you need to execute a callback right after any frame flush, use the second approach (requestAnimationFrame + setTimeout). It may lead to idling a whole animation frame before running the callback.

There is no API function to do what you want, but you can do the following:
window.requestAnimationFrame(function()
{
do_before();
window.requestAnimationFrame(do_after);
});
This makes sure your do_after is called after the first animation frame, and will trigger a second one after it's done executing.

.click event work on home page but didn't work and post page

I try to solved this problem but I don't understood where is the error.
I have and footer of all pages a to the visitors can comeback to the important part of the site whit slow animation.
In main page any problem that work correctly.
But in post page the animation didn't existe.
this is an exemple of page with the problem.
the code I used for the animation is this:
$(".gotof").click(function (e) {
var b = $(this).attr("href").substr(1);
console.log(b);
event.preventDefault();
$(".wrapper").animate({
scrollTop: $("#" + b).offset().top + $(".wrapper").scrollTop()-60
}, "slow");
console.log('e');});
First I think is the sibling of the element but no problem in this part.
After I try other functions for scroll to an anchor.
After multiples tests I control if something is not same in the two page but same Js, same plugin.
I don't understand what is the problem.
Please help me.

You're using event.preventDefault() - event is not defined, e is. Change it to e, instead of event, and it'll probably work. If you had looked in the browser console, you'd seen this. That might not be the error, but it will prevent the rest of the script to run.

Stop lag on calling scroll function with webkit filter javascript

I have this function being called everytime the page is scrolled by a user:
window.onscroll=function(){
document.getElementById("navBlurContent").style.top=-window.pageYOffset+125+"px";
}
However, this causes lots of lag to the browser. I have noticed some answers with jQuery that calls a delay to when the function is called. But, I want to use strictly javascript. I was wondering how this could this be done.
I have now realized that the majority of the lag is being caused by a -webkit-filter I have on the element. But I am not sure how to stop it.
Thanks

Try not to do a DOM select on every scroll.
Cache it:
var blur_content = document.getElementById("navBlurContent");
window.onscroll=function(){
blur_content.style.top=-window.pageYOffset+125+"px";
};

JavaScript/HTML5 FullScreen API

<div id="divbody">
<button id="begin">Click me</button>
<script>
$(document).ready(function() {
$("#begin").click(function() {
var e = document.getElementById('divbody');
e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
});
document.addEventListener("webkitfullscreenchange",function(){
if (document.webkitIsFullScreen) {
//alert('a');
document.webkitCancelFullScreen();
}
}, false);
});
</script>
</div>
The following code basically should cancel full screen as soon as it enters. However, the code above does not work (e.g., it enters full screen but does not cancel back). However, by uncommenting the alert in the webkitfullscreenchange event handler, it does actually cancel.
I have hard time understanding why this is so. Also, how would I achieve what I am trying to do without using alert?
Thanks.
UPDATE
I have tried all the comments, but it does not seem to work. Any help on this would be greatly appreciated!

Questions like this where an alert() fixes a problem is always a matter of the sequence of events. One solution that almost always works is to put the offending code in a short timing function:
window.setTimeout(cancelFull,10);
function cancelFull() { document.webkitCancelFullScreen(); }
UPDATE
Put the setTimeout() in place of your current CancelFullScreen, inside the listener.

Try this:
window.setTimeout(document.webkitCancelFullScreen, 10);