Skip to content

Commit 1be42e4

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
debounce&throttle
1 parent 4617bc2 commit 1be42e4

File tree

3 files changed

+207
-0
lines changed

3 files changed

+207
-0
lines changed

‎04-常用功能/08-debounce&throttle/debounce & throttle demo.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!--
2+
* @Author: victorsun
3+
* @Date: 2020-01-31 22:20:21
4+
* @LastEditors : victorsun
5+
* @LastEditTime : 2020-01-31 22:24:05
6+
* @Description: luban h5maker
7+
-->
8+
<html>
9+
<head>
10+
<title>debounce & throttle demo</title>
11+
<style>
12+
body {
13+
font-family: "Roboto", "Helvetica", Arial;
14+
font-weight: 200;
15+
color: #777;
16+
}
17+
#moveonme {
18+
width: 200px;
19+
height: 600px;
20+
background: #f5f5f5;
21+
border: 1px solid #aaa;
22+
float: left;
23+
box-sizing: border-box;
24+
padding: 25px;
25+
text-align: center;
26+
font-size: 18px;
27+
}
28+
.backtoblog {
29+
width: 200px;
30+
padding: 10px;
31+
background: #f5f5f5;
32+
border: 1px solid #aaa;
33+
color: #777;
34+
display: inline-block;
35+
text-decoration: none;
36+
transition: 0.2s all;
37+
box-sizing: border-box;
38+
position: relative;
39+
top: -1px;
40+
text-align: center;
41+
}
42+
.backtoblog:hover {
43+
border: 1px solid #aaa;
44+
background: transparent;
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<div id="moveonme">
50+
move your mouse here
51+
</div>
52+
<canvas id="paintonme" height="600" width="1190" style="float:right;"></canvas>
53+
<script src="./helpers.js"></script>
54+
<script src="./demo.js"></script>
55+
<script>
56+
var demo = new NIM_demo();
57+
demo.init();
58+
</script>
59+
</body>
60+
61+
</html>

‎04-常用功能/08-debounce&throttle/demo.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/**
2+
* Created by thephpjo on 21.04.14.
3+
*/
4+
5+
6+
function NIM_demo(){
7+
this.canvas = document.getElementById("paintonme");
8+
this.context = this.canvas.getContext("2d");
9+
10+
this.movearea = document.getElementById("moveonme");
11+
12+
this.canvasTimeScale = 5 * 1000;
13+
14+
this.paintColors = ["#bbd","#464","#d88"];
15+
this.totalLanes = this.paintColors.length;
16+
17+
this.leftMargin = 100;
18+
19+
var self = this;
20+
21+
this.init = function(){
22+
this.canvas.width = window.innerWidth - 250;
23+
this.flush();
24+
this.movearea.addEventListener("mousemove",this.regularHandler);
25+
this.movearea.addEventListener("mousemove",helpers.debounce(self.debounceHandler,100,this));
26+
this.movearea.addEventListener("mousemove",helpers.throttle(self.throttleHander,100,this));
27+
}
28+
29+
/**
30+
* painting the rectangle / line
31+
* @param lane
32+
* @param time
33+
*/
34+
this.paintRect = function(lane,time){
35+
if(time > this.canvasTimeScale){
36+
this.startTime += time;
37+
time = 0;
38+
this.flush()
39+
}
40+
// console.log(lane,time);
41+
this.context.fillStyle = this.paintColors[lane];
42+
43+
var x = (this.canvas.width - this.leftMargin) / this.canvasTimeScale * time + this.leftMargin;
44+
var y = this.canvas.height / this.totalLanes * lane;
45+
var height = this.canvas.height / this.totalLanes;
46+
var width = 1;
47+
48+
this.context.fillRect(x,y,width,height);
49+
}
50+
51+
this.flush = function(){
52+
this.context.fillStyle = "#ffffff";
53+
this.context.fillRect(0,0,this.canvas.width,this.canvas.height);
54+
55+
this.context.font = "200 18px Roboto,Helvetica,Arial";
56+
this.context.fillStyle = this.paintColors[0];
57+
this.context.fillText("Regular", 0, 100);
58+
59+
this.context.fillStyle = this.paintColors[1];
60+
this.context.fillText("debounce", 0, 300);
61+
62+
this.context.fillStyle = this.paintColors[2];
63+
this.context.fillText("throttle", 0, 500);
64+
}
65+
/**
66+
* get the time difference
67+
* @returns {number}
68+
*/
69+
this.getTimeDiff = function(){
70+
var time = new Date().getTime();
71+
if(!this.startTime){
72+
this.startTime = time;
73+
}
74+
time -= this.startTime;
75+
return time;
76+
}
77+
78+
this.regularHandler = function(){
79+
self.paintRect(0,self.getTimeDiff());
80+
}
81+
this.debounceHandler = function(){
82+
self.paintRect(1,self.getTimeDiff());
83+
}
84+
this.throttleHander = function(){
85+
self.paintRect(2,self.getTimeDiff());
86+
}
87+
}
88+
89+

‎04-常用功能/08-debounce&throttle/helpers.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* Created by thephpjo on 21.04.14.
3+
*/
4+
5+
6+
var helpers = {
7+
8+
/**
9+
* debouncing, executes the function if there was no new event in $wait milliseconds
10+
* @param func
11+
* @param wait
12+
* @param scope
13+
* @returns {Function}
14+
*/
15+
debounce: function (func, wait, scope) {
16+
var timeout;
17+
return function () {
18+
var context = scope || this, args = arguments;
19+
var later = function () {
20+
timeout = null;
21+
func.apply(context, args);
22+
};
23+
clearTimeout(timeout);
24+
timeout = setTimeout(later, wait);
25+
};
26+
},
27+
28+
/**
29+
* in case of a "storm of events", this executes once every $threshold
30+
* @param fn
31+
* @param threshhold
32+
* @param scope
33+
* @returns {Function}
34+
*/
35+
throttle: function (fn, threshhold, scope) {
36+
threshhold || (threshhold = 250);
37+
var last,
38+
deferTimer;
39+
return function () {
40+
var context = scope || this;
41+
42+
var now = +new Date,
43+
args = arguments;
44+
if (last && now < last + threshhold) {
45+
// hold on to it
46+
clearTimeout(deferTimer);
47+
deferTimer = setTimeout(function () {
48+
last = now;
49+
fn.apply(context, args);
50+
}, threshhold);
51+
} else {
52+
last = now;
53+
fn.apply(context, args);
54+
}
55+
};
56+
}
57+
}

0 commit comments

Comments
 (0)