防抖

防抖是让一个函数在一段时间间隔内没有调用，才开始执行被调用

  1. function debounce(func, delay){
  2.   // set timer as null
  3.     let timer = null;
  5.   return function() {    
  6.     // if timer is not null, wipe it
  7.     // if you input a value during the timer, wipe the last time 
  8.     // and start to time again
  9.     if(timer) clearTimeout(timer)
  11.     timer = setTimeout(() => {
  12.       // change the direction of this
  13.         func.call(this)
  14.     }, delay)
  16.   }
  17. }
  19. // React hooks 版本
  20. const useDebounce = (func: any, delay: number) => {
  21.   const timer = React.useRef<any>(null);
  23.   const debounce = React.useCallback(() => {
  24.     if(timer.current) clearTimeout(timer.current)
  26.     timer.current = setTimeout(() => {
  27.       func();
  28.     }, delay)
  29.   }, [func, delay])
  31.   return debounce;
  32. }

节流

节流是让一个函数无法在很短的时间间隔内被多次调用。意思就是一个函数被调用了后，得让它歇一下，等它歇完了（等一定的时间间隔之后），才能被再次调用。

  1. function throttle(func, delay){
  2.   let previous = 0
  3.   return function() {
  4.     let now = Date.now()
  5.     if(now-previous > delay){
  6.       func.call(this)
  7.       previous = now
  8.     }
  9.   }
  10. }
  12. // react hooks function
  14. const useThorttle = (func: any, delay: number) => {
  15.   const timer = React.useRef<any>(-1)
  17.   const throttle = React.useCallback(() => {
  18.     if(timer.current > -1) return null;
  20.     timer.current = setTimeout(() => {
  21.       func();
  22.       timer.current = -1;
  23.       clearTimeout(timer.current);
  24.     }, delay)
  26.   }, [func, delay])
  27.   return throttle
  28. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  11. <body>
  13.   <input type="text">
  14.   <div style="height: 1000px;"></div>
  17. </body>
  19. <script>
  20.   const input = document.querySelector('input');
  21.   input.oninput = debounce(function () {
  22.     console.log(this.value);
  23.   }, 1000)
  25.   function debounce(func, delay) {
  26.     let timer = null
  27.     return function () {
  28.       if (timer) clearTimeout(timer)
  29.       timer = setTimeout(() => {
  30.         func.call(this)
  31.       }, delay)
  32.     }
  33.   }
  37.   window.onscroll = throttle(function () {
  38.     console.log('page scroll');
  39.   }, 1000);
  40.   // window.onscroll = function () {
  41.   //   console.log('page scroll');
  42.   // };
  44.   function throttle(func, delay) {
  45.     let previous = 0;
  46.     return function () {
  47.       let now = Date.now();
  48.       if (now - previous > delay) {
  49.         func.call(this);
  50.         previous = now;
  51.       }
  52.     }
  53.   }
  54. </script>
  56. </html>