• 函数节流与防抖的实现


    函数节流与函数防抖

    最近由于处于互联网大厂的秋招季节,因此这些天都在看前端性能优化和算法方面的知识。在性能优化方面,看了网上的一些文章,同时看完了《高性能网站建设指南》和《高性能JavaScript》两本书,颇有收获,可以参看这篇文章,主要是一些前端性能优化方面的总结。传送门:前端性能优化最佳实践

    这篇文章主要是讲函数节流与函数防抖相关知识的。虽然在上面两本书里面没有谈及这两方面的内容,但是我觉得,对JS常用事件进行节流或者防抖的处理是属于性能优化方面的。

    目的

    实现了这两个功能函数之后发现,节流同防抖在实现过程可能不太一样,但是目的和本质都是一样的:提高性能

    相同点

    节流和防抖都是采用闭包的形式来实现。这主要运用了闭包的一个特性:能够记住并访问所在的词法作用的标识符。如果对闭包不了解的可以看看这个回答:什么是闭包

    用途

    假如,一条河流,想检测水质问题。那么我们可以完全堵住,在某个时间段后,一次性释放。那么这些水就属于检测通过了。(这个比喻我都很迷... )

    函数防抖也是大同小异。在某个特定时间后执行函数,但是在此时间段内重复调用函数的话,不会执行。只有当用户停下操作后,才会在该时间后执行此函数。

    主要用于输入框keyup事件等一些需要用户输入内容的行为。

    函数防抖
    function debounce (fn, wait) {
        let timer = null
        return function () {
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                timer = null
                fn.apply(this, arguments)
            }, wait)
        }
    }
    
    函数节流

    最简单的比喻,河流的水,如果想控制一下流量,那就可以让水流间隔的流。有点类似函数节流,间隔执行;如果完全堵住,在某个时间段后一次性释放,就是函数防抖了。

    最简单的函数节流实现方式如下

    function throttle (fn, wait) {
        let start = 0
        return function () {
            const curr = Date.now()
            if (curr - start < wait) return
            start = curr
            fn.apply(fn, arguments)
        }
    }
    

    假如想加一些立即执行、多少秒后必须执行,那么可以参考下面的函数

    function throttle (fn, option) {
      let time = null
      let start = null
      let setting = {
        delay: 300,
        mustRunTime: 500,   // 在500内必须执行。如在resize事件时,按住不放超过500ms之后就必须执行函数。
        immediate: false
      }
      option = Object.assign({}, setting, option)
      return function () {
        let args = arguments
        let context = this
        let currStart = +new Date()
        if (!start) {
          start = currStart
        }
        let timeDiff = currStart - start
        // 初始调用resise函数时立即执行函数,而不用等待delay的时间
        if (option.immediate || timeDiff > option.mustRunTime || timeDiff > option.delay) {
          fn.apply(context, args)
          option.immediate = false
          start = currStart
        } else {
          window.clearTimeout(time)
          time = window.setTimeout(() => {
            fn.apply(context, args)
          }, option.delay)
        }
      }
    }
    

    最后

    最后超简单总结下:
    函数节流:间隔执行函数,主要用于keyup事件。
    函数防抖:某个时间内都不执行,该时间后才执行函数,主要用于touchmove, resize等事件。

  • 相关阅读:
    转 mysql 数据结构详解
    转单元测试之道C#版
    转 告诉你如何用C#写出iOS与Android应用
    转 MySQL索引背后的数据结构及算法原理
    转单元测试基础知识
    转C#冒泡排序
    如何让web页面鼠标右键单击之后不出现菜单选项
    开博文
    jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
    jquery ui tabs详解(中文)
  • 原文地址:https://www.cnblogs.com/unclekeith/p/7466205.html
Copyright © 2020-2023  润新知