We Keep Coding

Angular: how to keep resetting $timeout on scroll events, and let $timeout finish otherwise

I'm working on a little controller that watches for a scroll event and applies a CSS class, and applies a different CSS class. Long story short I'm trying to have the scrollbar thumb disappear when you're not scrolling, and appear when you ARE scrolling (like the scrollbar thumb on an iPhone).
I'm having trouble implementing it. My thought process doing this is:
1) On page load, set a $scope variable to false.
2) Watch for a scroll event on the div I want.
3) Once the scroll event starts, set the $scope variable to true.
4) Keep on resetting the $timeout whenever a scroll event fires.
5) In the timeout function, set the $scope variable back to false if the $timeout finishes.
6) In the HTML, set an ng-class to watch for this $scope variable.
I thought that sounded pretty simple, but I'm having a lot of trouble implementing it and I'm not sure if it's just something about $timeout that I'm missing, or if I'm just thinking in circles and don't realize it yet.
This is the controller I have set up for it (An actual working JSFiddle is linked beneath this wall of code):
(function () {
'use strict';
angular
.module('scrollingApp')
.controller('scrollbarController', scrollbarController);
function scrollbarController($scope, $timeout) {
$scope.actuallyScrolling = false;
$scope.scrolling = function() {
$('.container').on('scroll', function(event) {
$scope.actuallyScrolling = true;
console.log('before checkScroll ', $scope.actuallyScrolling);
checkScroll();
});
};
var checkScroll = function() {
var timeoutEnded = false;
$timeout(function() {
if($scope.actuallyScrolling) {
$scope.actuallyScrolling = false;
console.log('inside $timeout if statement', $scope.actuallyScrolling);
}
}, 1000);
console.log($scope.actuallyScrolling);
};
$scope.scrolling();
}
})();
I set up a JSFiddle here (https://jsfiddle.net/hurgledurf/k5naeora/) with the code I have so far (hopefully it's self-explanatory), and would appreciate any help/insight anyone might have. Thank you!

Angular of not... To "reset" a timeout on scroll should be done this way:
var timer;
$('.container').on('scroll', function(event) {
console.log('User is actually scrolling...');
clearTimeout(timer);
timer = setTimeout(function(){
console.log('User finished scrolling.');
},500);
});
It replace this chunk of your code:
$('.container').on('scroll', function(event) {
$scope.actuallyScrolling = true;
console.log('before checkScroll ', $scope.actuallyScrolling);
checkScroll();
});

Trigger ng-show after delay

I want to make a div appear 10s after the page has loaded. I would like to use angular.
<div class="appearingitem" ng-show="timeduration"></div>
Any ideas how i might accomplish this? Is there any way to trigger, say a function after a set time? I feel like this should be easy, and i've tried googleing but since i'm new to programming I don't know exactly what I'm looking for
Thank you

$timeout would help you in this case, by executing desired code in callback with specified timeout in milliseconds.
Code
$scope.timeduration = true; //showing some element
$timeout(function(){
$scope.timeduration = false; //hiding after 10 secs
}, 10000);
Make sure you should inject $timeout dependency on your controller factory function before using it.

angular.module('app', []).
factory('timeduration',function($timeout,$q){
var timeduration = false;
$timeout(function(){//Simulate a request
timeduration = true;
},2000);
return timeduration;
}).
controller('root',function($scope,timeduration){
$scope.timeduration = timeduration;
});
<div class="appearingitem" ng-show="timeduration">
// which you want to show here after delay
</div>
div show after 2 sec you can change your time instead of 2000 which you want.
Hope its help to you.

try this
$scope.display = function(){
$scope.timeduration=false;
$timeout(function () {
$scope.timeduration= true;
}, 10000);
}

Use the $timeout Service:
https://docs.angularjs.org/api/ng/service/$timeout
$scope.showItem = false
$timeout(function(){
$scope.showItem = true;
}, 10000); // Time in ms

Double setInterval

When my AJAX call is completed I need to call setInterval, but when two AJAX calls are made it also calls setInterval twice. How can I stop the previous setInterval?
$(document).ajaxComplete(function () {
$(".iframeFake").load(function () {
var islem = setInterval(function () {
$('.iframeFake').each(function (event) {
console.log(1);
}, 1000);
});
});
In chrome console in first post i get 1 per second - but after second post i get double 1 per second. Where is my problem?

var islem;
$(document).ajaxComplete(function () {
$(".iframeFake").load(function () {
clearInterval(islem);
islem = setInterval(function () {
$('.iframeFake').each(function (event) {
console.log(1);
}, 1000);
});
});
If you want to maintain that there is always one interval, store the variable at a higher scope, and cancel before you create to stop any lingering intervals.
DEMO of the principle in action

Sleep for a while onclick of a button

Currently i have the following
$(document).ready(function () {
$('#abc').click(function () {
setTimeout(function () {
//do stuff
}, 2000);
});
});
Is there a better way to do it, perhaps something like this
$('#abc').click(function () {
// sleep/delay or whatever
//do stuff
});

No, there is no better way. In order to sleep synchronously you need to use a spinlock which will use all the browser's resources and spike the CPU for 2 seconds (the duration of the "sleep").
Stick with the asynchronous version.

$('#abc').click(function () {
$(this).delay(seconds);
//do stuff
});
Try this
I dunno wheather it works

Change reload interval to waiting after the last reload

My application reloads data every 500ms. How do I have to change the code to not reload every 500ms but to wait for 500ms after the last reload to trigger a new one?
App = Ember.Application.create({
ready: function() {
var switchboard = App.Switchboard.find(switchboard_id);
setInterval(function() {
switchboard.reload();
}, 500);
}
});

I have just done something similar. You should use activate property on your route (http://emberjs.com/api/classes/Ember.Route.html#method_activate).
Checkout this pull request: https://github.com/chrmod/rowmark/pull/2/files
Some example:
App.NoteRoute = Ember.Route.extend({
activate: function() {
this.interval = setInterval(function() {
this.get('controller').set('toSave', true);
}.bind(this), 5000);
}
})
UPDATE
I understand you wrong. Sorry for that.
First of all you need to know that find from Ember Model or Ember Data returns promises (http://emberjs.com/blog/2013/05/28/ember-data-0-13.html)
I think you can do such trick to implement that:
App = Ember.Application.create({
ready: function() {
var switchboard;
setInterval(function() {
switchboard = App.Switchboard.find(switchboard_id).then(function(){
setTimeout(function(){}, 499);
});
}, 1);
}
});
First of all we run setInterval to run this in infinity loop. Next in each loop iteration we find Switchboard and when Ember data loads from external server those data that run function that is passed to then. This function simply wait 499ms :)