zoukankan      html  css  js  c++  java
  • 防抖、节流函数

    一、防抖

      原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

      场景:

        1.按钮提交场景,防止多次提交按钮,只执行最后一次的提交

        2.搜索框联想场景,防止联想发送请求,只发送最后一次输入

      简易版:

    function debounce (func, wait) {
        let timeout
        return function () {
            const context = this
            const args = arguments
            clearTimeout(timeout)
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait)
        }
    }

      立即执行版:

        有时希望立刻执行函数,然后等到停止触发n秒后才可以重新触发执行

    function debounce (func, wait, immediate) {
        let timeout
        return function () {
            const context = this
            const args = arguments
            if (timeout) clearTimeout(timeout)
            if (immediate) {
                const callNow = !timeout
                timeout = setTimeout(function () {
                    timeout = null
                }, wait)
                if (callNow) func.apply(context, args)
            } else {
                timeout = setTimeout(function () {
                    func.apply(context, args)
                }, wait)
            }
        }
    }

    二、节流

      原理:规定在一个单位时间内,只能触发一次函数。如果这个函数在这个单位时间内触发多次函数,只有一次生效

      场景:

        1.拖拽:固定时间内只执行一次,防止超高频次触发位置变动

        2.缩放:监控浏览器resize

    function throttle (func, wait) {
        let timeout
        return function () {
            const context = this
            const args = arguments
            if (!timeout) {
                timeout = setTimeout(function () {
                    timeout = null
                    func.apply(context, args)
                }, wait)
            }
        }
    }
  • 相关阅读:
    数字重排
    环游世界
    Hibernate笔记(一)增删改查CRUD
    Sliding Window Algorithm 滑动窗口算法
    纯HTML/CSS/JS实现淘宝、京东两种轮播图
    COA计算机组织与结构笔记
    数据结构与算法笔记:最小生成树Kruskal、Prim算法与JAVA实现
    数据结构与算法笔记:图的基础与JAVA实现
    数据结构与算法:并查集
    JDBC学习笔记
  • 原文地址:https://www.cnblogs.com/yaxinwang/p/13841533.html
Copyright © 2011-2022 走看看