Geek Answers Handbook

How to skip the skip field through "setInterval"

I'm currently wondering if there is a better solution than passing this area to a lambda function via the 'e' parameter, and then passing it to funkyFunction 'using the call () method -

setInterval(function(e){e.funkyFunction.call(e)}, speed, this)

(A minor question: I read something about memory leaks in javascript. How does a lambda function affect my memory? Is it better to first determine how var i = function(e)... and then pass it as a parameter to setInterval?)

+4
source share
6 answers

What is wrong, just relying on a certain variable of the external area?

 (function() { var x = {}; setInterval(function() { funkyFunction.call(x) }, speed); })();
+4
source

My situation may have been a little different, but here is what I did:

 var self = this; setInterval(function() { self.func() }, 50);

My scenario was that my code was inside a class method and I needed to maintain the correct scope because I did not want the 'this' binding to resolve the current window.

eg. I wanted to run MyClass.animate from MyClass.init using setInterval, so I put this code to save in MyClass.init

+7
source

You can use the built-in snap function.

 function Loop() { this.name = 'some name for test'; setInterval( (function(){//wrap the function as object //after bind, "this" is loop refference console.log(this); }).bind(this), 1000 );// bind the object to this (this is Loop refference) } var loop = new Loop();

paste this example into the console to see the result

+3
source

I had the same question, but there seems to be no built-in solution, so here is a short workaround that I hit together:

 function setScopedInterval(func, millis, scope) { return setInterval(function () { func.apply(scope); }, millis); }

using:

 function MyClass() { this.timer = null; this.myFunc = function() { console.log('do some stuff'); }; this.run = function() { this.timer = setScopedInterval(function () { this.myFunc(); }, 1000, this); }; this.stop = function() { clearInterval(this.timer); }; } var instance = new MyClass(); instance.run(); // will log to console every second // until this line is called instance.stop();

This only applies to the use case in which you pass the actual function, not the line of code that needs to be executed.

As for your question about memory leak when using this function, it is not so much a problem with using setInterval , but with anonymous functions in itself. If you use a link to an object inside a lambda, that link will contain the link object in memory as long as there is an anonymous function. I think the function is destroyed by calling clearInterval .

I do not think that there is an advantage in assigning a function to a variable first, on the contrary, it will create another variable containing a link that will not be garbage collected while the anon function exists ...

+1
source

You can also watch the YUI Framework . This is great for building applications and ease of learning.

 YUI2: YAHOO.lang.later(when, scope, fn, args, periodic); YUI3: Y.later(when, scope, fn, args, periodic);

UPDATE as an example

Using YUI and jQuery (don't forget to include $ .noConflict ())

 var jQuerySelector = jQuery("div[class^='form-field-']"); jQuerySelector.hide(); jQuery(jQuerySelector[0]).show(); YAHOO.lang.later(5000, jQuery, function(jQuerySelector) { if((!(this.index)) || (this.index == (jQuerySelector.length))) { this.index = 0; } jQuerySelector.hide(); this(jQuerySelector[this.index++]).show(); }, jQuerySelector, true);

In short

  • Parameter 1º: 5000 for every 5000 milliseconds, parameter 3º (function) will be executed
  • parameter 2º: the jQuery object to be referenced using this
  • parameter 3º: function to be executed. It receives either an array or an object passed as parameter 4º as a parameter
  • Parameter 5º: true, if true, runs continuously at a specified interval until canceled

see http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_later

UPDATE There is no need for $ .noConflict (), because YUI does not use $ in any way.

+1
source

There are two important differences.

1) Do you want a link to the passed parameter so that the timeout function can track the changes made in it, or do you need a clone of the passed parameter?

2) Do you want to get a timeout link if you want to cancel it? (Yes!)

 // Normal setTimeout: retains a reference to `test` and returns the bad value var test = 'test: good'; var timer = setTimeout(function() { console.log(test); }, 1000); test = 'test: bad'; // Test2 receives a clone of `test2` and returns the good value, but does so right away, not on a timeout var test2 = 'test2: good'; var timer2 = setTimeout((function() { console.log(test2); })(test2), 1000); test2 = 'test2: bad'; // Test3 receives a clone of `test3` and returns the good value, but doesn't return a reference to the timeout, and can't be canceled var test3 = 'test3: good'; var timer3 = function(test3) { setTimeout(function() { console.log(test3); }, 1000); }(test3); test3 = 'test3: bad'; // Test4 receives a clone of `test4` and returns the good value, and correctly returns timeout reference var test4 = 'test4: good'; var timer4 = function(test4) { return setTimeout(function() { console.log(test4); }, 1000); }(test4); test4 = 'test4: bad'; // Test5 retains a reference to `test5` and returns the bad value var test5 = 'test5: good'; var timer5 = setTimeout((function() { console.log(test5); }).bind(test5), 1000); test5 = 'test5: bad'; // Did we capture references to the timeouts? console.log(typeof timer); console.log(typeof timer2); console.log(typeof timer3); console.log(typeof timer4); console.log(typeof timer5);
0
source

More articles:


All Articles