mozilla

Compare Revisions

resize

Change Revisions

Revision 620035:

Revision 620035 by teoli on

Revision 629929:

Revision 629929 by codeboy on

Title:
resize
resize
Slug:
Web/Events/resize
Web/Events/resize
Tags:
"requestAnimationFrame"
"requestAnimationFrame"
Content:

Revision 620035
Revision 629929
n67var optimizedResize = (function() {n
68 
69    var callbacks = [],
70        changed = false,
71        running = false;                     
72 
73    // fired on resize event
74    function resize() {
75        if (!running) {
76            changed = true;
77            loop();
78        }
79    }
80 
81    // resource conscious callback loop
82    function loop() {
83        if (!changed) {     
84            running = false;       
85        }
86        else {
87            changed = false;
88            running = true;            
89 
90            callbacks.forEach(function(callback) {
91                callback();
92            });
93 
94            window.requestAnimationFrame(loop);
95        }
96    }
97 
98    // adds callback to loop
99    function addCallback(callback) {
100        if (callback) {
101            callbacks.push(callback);
102        }
103    }
104 
105    return {
106        // initalize resize event listener
107        init: function(callback) {
108            if (window.requestAnimationFrame) { 
109                window.addEventListener('resize', resize);
110                addCallback(callback);
111            }
112        },
113 
114        // public method to add additional callback
115        add: function(callback) {
116            addCallback(callback);
117        }
118    }
119}());
120 
121// start process
122optimizedResize.init(function() {
123    console.log('Resource conscious resize callback!')
124});
tt68    <div>
69      var optimizedResize = (function() {
70    </div>
71    <div>
72      &nbsp;
73    </div>
74    <div>
75      &nbsp; &nbsp; var callbacks = [],
76    </div>
77    <div>
78      &nbsp; &nbsp; &nbsp; &nbsp; running = false;
79    </div>
80    <div>
81      &nbsp;
82    </div>
83    <div>
84      &nbsp; &nbsp; // fired on resize event
85    </div>
86    <div>
87      &nbsp; &nbsp; function resize() {
88    </div>
89    <div>
90      &nbsp;
91    </div>
92    <div>
93      &nbsp; &nbsp; &nbsp; &nbsp; if (!running) {
94    </div>
95    <div>
96      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; running = true;
97    </div>
98    <div>
99      &nbsp;
100    </div>
101    <div>
102      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (window.reques
 >tAnimationFrame) {
103    </div>
104    <div>
105      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; win
 >dow.requestAnimationFrame(runCallbacks);
106    </div>
107    <div>
108      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {
109    </div>
110    <div>
111      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set
 >Timeout(runCallbacks, 66);
112    </div>
113    <div>
114      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
115    </div>
116    <div>
117      &nbsp; &nbsp; &nbsp; &nbsp; }
118    </div>
119    <div>
120      &nbsp;
121    </div>
122    <div>
123      &nbsp; &nbsp; }
124    </div>
125    <div>
126      &nbsp;
127    </div>
128    <div>
129      &nbsp; &nbsp; // run the actual callbacks
130    </div>
131    <div>
132      &nbsp; &nbsp; function runCallbacks() {
133    </div>
134    <div>
135      &nbsp;
136    </div>
137    <div>
138      &nbsp; &nbsp; &nbsp; &nbsp; callbacks.forEach(function(call
 >back) {
139    </div>
140    <div>
141      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback();
142    </div>
143    <div>
144      &nbsp; &nbsp; &nbsp; &nbsp; });
145    </div>
146    <div>
147      &nbsp;
148    </div>
149    <div>
150      &nbsp; &nbsp; &nbsp; &nbsp; running = false;
151    </div>
152    <div>
153      &nbsp; &nbsp; }
154    </div>
155    <div>
156      &nbsp;
157    </div>
158    <div>
159      &nbsp; &nbsp; // adds callback to loop
160    </div>
161    <div>
162      &nbsp; &nbsp; function addCallback(callback) {
163    </div>
164    <div>
165      &nbsp;
166    </div>
167    <div>
168      &nbsp; &nbsp; &nbsp; &nbsp; if (callback) {
169    </div>
170    <div>
171      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callbacks.push(ca
 >llback);
172    </div>
173    <div>
174      &nbsp; &nbsp; &nbsp; &nbsp; }
175    </div>
176    <div>
177      &nbsp;
178    </div>
179    <div>
180      &nbsp; &nbsp; }
181    </div>
182    <div>
183      &nbsp;
184    </div>
185    <div>
186      &nbsp; &nbsp; return {
187    </div>
188    <div>
189      &nbsp; &nbsp; &nbsp; &nbsp; // initalize resize event liste
 >ner
190    </div>
191    <div>
192      &nbsp; &nbsp; &nbsp; &nbsp; init: function(callback) {
193    </div>
194    <div>
195      &nbsp;
196    </div>
197    <div>
198      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (window.reques
 >tAnimationFrame) {
199    </div>
200    <div>
201      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; win
 >dow.addEventListener('resize', resize);
202    </div>
203    <div>
204      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; add
 >Callback(callback);
205    </div>
206    <div>
207      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
208    </div>
209    <div>
210      &nbsp;
211    </div>
212    <div>
213      &nbsp; &nbsp; &nbsp; &nbsp; },
214    </div>
215    <div>
216      &nbsp;
217    </div>
218    <div>
219      &nbsp; &nbsp; &nbsp; &nbsp; // public method to add additio
 >nal callback
220    </div>
221    <div>
222      &nbsp; &nbsp; &nbsp; &nbsp; add: function(callback) {
223    </div>
224    <div>
225      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addCallback(callb
 >ack);
226    </div>
227    <div>
228      &nbsp; &nbsp; &nbsp; &nbsp; }
229    </div>
230    <div>
231      &nbsp; &nbsp; }
232    </div>
233    <div>
234      }());
235    </div>
236    <div>
237      &nbsp;
238    </div>
239    <div>
240      // start process
241    </div>
242    <div>
243      optimizedResize.init(function() {
244    </div>
245    <div>
246      &nbsp; &nbsp; console.log('Resource conscious resize callba
 >ck!')
247    </div>
248    <div>
249      });
250    </div>

Back to History