zoukankan      html  css  js  c++  java
  • 节流&防抖

    一、防抖 debounce(频繁操作最后触发,避免频繁触发)


    场景

    1. 监听一个输入框,内容发生变化触发change事件,当我们在输入或者删除时会频繁触发change事件,中间这些触发时没必要的,只要当我们停止改变时触发一次change就可以

    2. 监听滚动条,滚动条滚动触发scroll事件,当我们滚动时会频繁触发scroll事件,中间这些触发没必要,只要当我们停止滚动时触发一次scroll就可以

    代码封装

    function debounce(fn, delay = 500) {
      let timer = null
      return function () {
        const _this = this
        let args = arguments
        if (timer) {
          // 再次触发,如果原来有未执行的定时器,则销毁原来的,然后重新创建一个
          // 如果过了delay事件后,没有再触发就会执行定时器回调函数
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(_this, args)
          timer = null
        }, delay) 
      }
    }

    使用demo

    window.onscroll = debounce(() => {
          console.log('scroll')
        }, 1000)

    二、节流 throttle(频繁操作,保持一定频率触发,即一定时间内只能触发一次)


    场景

    1. 拖拽实现,需要监听dragmove事件,随时获取拖拽元素位置然后改变元素位置,但是这些事件触发频率很高,1秒可能触发几十次,几百次,如果处理函数中还涉及dom操作会严重浪费计算机资源,降低性能,甚至造成卡顿。 

    2. 用户点击按钮触发ajax请求,如果用户快速点击就会频繁发出大量每必要的重复请求,占用网络资源。

    代码封装  

    function throttle (fn, ms = 100) {
      let timer = null
      return function () {
        const _this = this
        let args = arguments
        // 定时器存在就不再创建新的定时器
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(_this, args)
            timer = null
          }, ms)
        }
      }
    }

    使用demo

    document.onmousemove = throttle(() => {
          console.log('throttle')
        }, 500)

    ------------smile

  • 相关阅读:
    Java 设计模式-享元模式(Flyweight)
    Java 设计模式-状态模式模式(State)
    Java 设计模式-建造者模式(Builder)
    Java 设计模式-抽象工厂(Abstract Factory)
    Spring 之 JMS 基于JMS的RPC
    Spring 之 JMS 监听JMS消息
    Spring 之 JMS 发送和接收消息
    数据结构
    BFS vs DFS
    子集和排列
  • 原文地址:https://www.cnblogs.com/Walker-lyl/p/13615758.html
Copyright © 2011-2022 走看看