页面函数防抖和节流的区别

直接上代码，注释防抖和节流之间的区别和差异

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
     
  4.  
    <head>
  5.  
    <meta charset="UTF-8">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <meta ="X-UA-Compatible" content="ie=edge">
  8.  
    <title>防抖和节流</title>
  9.  
    </head>
  10.  
     
  11.  
    <body>
  12.  
    <div id="content"
  13.  
    style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;
  14.  
    font-size:80px;">
  15.  
    </div>
  16.  
    <script>
  17.  
    let num = 1;
  18.  
    const content = document.getElementById('content');
  19.  
     
  20.  
    function count() {
  21.  
    content.innerHTML = num++;
  22.  
    };
  23.  
    // content.onmousemove = count;
  24.  
     
  25.  
     
  26.  
    // 防抖，所谓防抖就是触发事件n秒后才执行函数，如果在n秒内又触发了事件，则会重新计算函数
  27.  
    执行时间
  28.  
     
  29.  
    // 防抖函数分为非立即执行版和立即执行版
  30.  
     
  31.  
    // 非立即执行
  32.  
    function debounce(func, wait) {
  33.  
    let timeout;
  34.  
    return function () {
  35.  
    //this和参数传递 获取this 目的是为了让debounce函数最终返回的函数This指向不变
  36.  
    const context = this
  37.  
    //获取参数args 目的是依旧能接收到e参数
  38.  
    const args = [...arguments] //MouseEvent事件
  39.  
    if (timeout) clearTimeout(timeout)
  40.  
    timeout = setTimeout(() => {
  41.  
    func.apply(context, args)
  42.  
    }, wait)
  43.  
    }
  44.  
    }
  45.  
    // content.onmousemove = debounce(count, 1000)
  46.  
     
  47.  
    // 立即执行 触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数
  48.  
    function debounce(func, wait) {
  49.  
    let timeout
  50.  
    return function () {
  51.  
    const context = this
  52.  
    const args = [...arguments]
  53.  
    if (timeout) clearTimeout(timeout)
  54.  
    const callNow = !timeout
  55.  
    timeout = setTimeout(() => {
  56.  
    timeout = null
  57.  
    }, wait)
  58.  
    if (callNow) func.apply(context, args)
  59.  
    }
  60.  
    }
  61.  
     
  62.  
    // 防抖函数 立即执行和非立即执行双剑合璧
  63.  
    /**
  64.  
    * @desc 函数防抖
  65.  
    * @param func 函数
  66.  
    * @param wait 延迟执行毫秒数
  67.  
    * @param immediate true 表立即执行，false 表非立即执行
  68.  
    */
  69.  
    function debounce(func, wait, immediate) {
  70.  
    let timeout;
  71.  
    return function () {
  72.  
    const context = this;
  73.  
    const args = [...arguments];
  74.  
    if (timeout) clearTimeout(timeout);
  75.  
    if (immediate) {
  76.  
    const callNow = !timeout;
  77.  
    timeout = setTimeout(() => {
  78.  
    timeout = null;
  79.  
    }, wait)
  80.  
    if (callNow) func.apply(context, args)
  81.  
    } else {
  82.  
    timeout = setTimeout(() => {
  83.  
    func.apply(context, args)
  84.  
    }, wait);
  85.  
    }
  86.  
    }
  87.  
    }
  88.  
     
  89.  
    // 节流 所谓节流，就是指连续触发事件但是在n秒中只执行一次函数。节流会稀释函数执行频率
  90.  
     
  91.  
    // 在持续触发事件的过程中，函数不会立即执行，并且每1s执行一次，在停止触发事件后，函数还会
  92.  
    在执行一次
  93.  
     
  94.  
    // 时间戳版 在时间段内开始的时候
  95.  
    function throttle(func, wait) {
  96.  
    var previous = 0
  97.  
    return function () {
  98.  
    let now = Date.now()
  99.  
    let context = this
  100.  
    let args = [...arguments]
  101.  
    if (now - previous > wait) {
  102.  
    func.apply(context, args)
  103.  
    previous = now
  104.  
    }
  105.  
    }
  106.  
    }
  107.  
    content.onmousemove = throttle(count, 1000)
  108.  
    // 定时器版本 时间段内结束的时候
  109.  
    function throttle(func, wait) {
  110.  
    let timeout
  111.  
    return function () {
  112.  
    let context = this
  113.  
    let args = [...arguments]
  114.  
    if (!timeout) {
  115.  
    timeout = setTimeout(() => {
  116.  
    timeout = null
  117.  
    func.apply(context, args)
  118.  
    }, wait)
  119.  
    }
  120.  
    }
  121.  
    }
  122.  
     
  123.  
    // 节流双剑合璧
  124.  
    /**
  125.  
    * @desc 函数节流
  126.  
    * @param func 函数
  127.  
    * @param wait 延迟执行毫秒数
  128.  
    * @param type 1 表时间戳版，2 表定时器版
  129.  
    */
  130.  
    function throttle(func, wait, type) {
  131.  
    if (type === 1) {
  132.  
    let previous = 0;
  133.  
    } else if (type === 2) {
  134.  
    let timeout;
  135.  
    }
  136.  
    return function () {
  137.  
    let context = this;
  138.  
    let args = arguments;
  139.  
    if (type === 1) {
  140.  
    let now = Date.now();
  141.  
     
  142.  
    if (now - previous > wait) {
  143.  
    func.apply(context, args);
  144.  
    previous = now;
  145.  
    }
  146.  
    } else if (type === 2) {
  147.  
    if (!timeout) {
  148.  
    timeout = setTimeout(() => {
  149.  
    timeout = null;
  150.  
    func.apply(context, args)
  151.  
    }, wait)
  152.  
    }
  153.  
    }
  154.  
     
  155.  
    }
  156.  
    }
  157.  
    </script>
  158.  
     
  159.  
    </body>
  160.  
     
  161.  
    </html>
 
————————————————