debounce-throttle/main.js at master · dcorb/debounce-throttle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
$(document).ready(function(){

  var allEvents = $('#allEvents'),
     divDebounce_true = $('#debounce_true'),
     divDebouncejtrue = $('#debouncejtrue'),
     divDebounce_false = $('#debounce_false'),
     divDebouncejfalse = $('#debouncejfalse'),
     divThrottle_true = $('#throttle_true'),
     divThrottlejtrue = $('#throttlejtrue'),
     divThrottlejfalse = $('#throttlejfalse'),
     sidebar_mousemove = $('#sidebar-free'),
     counter = 0,
     next_color = 0,
     drawing,
     drawing_automated,
     lazy_Debounce_Events,
     lazyDebounce_true,
     lazyDebouncejtrue,
     lazyDebounce_false,
     lazyDebouncejfalse,
     lazyThrottle_true,
     lazyThrottlejtrue,
     lazyThrottlejfalse;


  function update(div, color){
    div[0].lastChild.className = 'color' + color;
    div[0].lastChild.innerHTML = color;
  }


  function setup_lazy_functions(_){
    lazy_Debounce_Events = $.throttle(50, false, updateEvents);

    lazyDebounce_true = _.debounce(update, 200, true);
    lazyDebouncejtrue = $.debounce(200, true, update);

    lazyDebounce_false = _.debounce(update, 200, false);
    lazyDebouncejfalse = $.debounce(200, false, update);

    lazyThrottle_true = _.throttle(update, 200);
    lazyThrottlejtrue = $.throttle(200, true, update);
    lazyThrottlejfalse = $.throttle(200, false, update);
  }

  function updateEvents(){
    update(allEvents, next_color);
    lazyDebounce_true(divDebounce_true, next_color);
    lazyDebouncejtrue(divDebouncejtrue, next_color);
    lazyDebounce_false(divDebounce_false, next_color);
    lazyDebouncejfalse(divDebouncejfalse, next_color);
    lazyThrottle_true(divThrottle_true, next_color);
    lazyThrottlejtrue(divThrottlejtrue, next_color);
    lazyThrottlejfalse(divThrottlejfalse, next_color);
    next_color++;
    if (next_color > 9){
      next_color = 0;
    }
  }

  // Initially demo it with underscore.js
  setup_lazy_functions(_);

  function reset(){
    allEvents.html('<span></span>');
    divDebounce_true.html('<span></span>');
    divDebouncejtrue.html('<span></span>');
    divDebounce_false.html('<span></span>');
    divDebouncejfalse.html('<span></span>');
    divThrottle_true.html('<span></span>');
    divThrottlejtrue.html('<span></span>');
    divThrottlejfalse.html('<span></span>');
    next_color = 0;
    counter = 0;
    clearInterval(drawing_automated);
    clearInterval(drawing);
  }

  sidebar_mousemove.on('mousemove', function (){
    lazy_Debounce_Events();
  });

  sidebar_mousemove.on('mouseenter', function(){
    reset();
    draw();
  });

  $('#every100').on('click', function(e){
    e.preventDefault();
    reset();
    draw();
    drawing_automated = setInterval(function(){
      sidebar_mousemove.trigger('mousemove');
    }, 100);
  });


  $('#every300').on('click', function(e){
    e.preventDefault();
    reset();
    draw();
    drawing_automated = setInterval(function(){
      sidebar_mousemove.trigger('mousemove');
      sidebar_mousemove.trigger('mousemove');
    }, 300);
   });


  $('#use-lodash').on('click', function(e){
    e.preventDefault();
    if ($(this).data('lodash')){
      setup_lazy_functions(_);
      $(this).data('lodash', false)
             .html('Using <strong>underscore.js</strong> | <del>lodash.js</del>')
    } else {
      setup_lazy_functions(lo);
      $(this).data('lodash', true)
             .html('Using <del>underscore.js</del> | <strong>lodash.js</strong>')
    }
  });

  var draw = function(){
    drawing = setInterval(function(){
      counter++;
      allEvents[0].appendChild(document.createElement('span'));
      divDebounce_true[0].appendChild(document.createElement('span'));
      divDebouncejtrue[0].appendChild(document.createElement('span'));
      divDebounce_false[0].appendChild(document.createElement('span'));
      divDebouncejfalse[0].appendChild(document.createElement('span'));
      divThrottlejtrue[0].appendChild(document.createElement('span'));
      divThrottlejfalse[0].appendChild(document.createElement('span'));
      divThrottle_true[0].appendChild(document.createElement('span'));

      if (counter > 95){
        clearInterval(drawing);
        clearInterval(drawing_automated);
      }
    }, 30);
  };

});