非常实用的 节流JS

let timer; let

    flag

/**

* 节流原理:在一定时间内,只能触发一次

*

* @param {Function} func 要执行的回调函数

* @param {Number} wait 延时的时间

* @param {Boolean} immediate 是否立即执行

* @return null

*/

function throttle(func, wait = 500, immediate = true) {

    if (immediate) {

        if (!flag) {

            flag = true

            // 如果是立即执行,则在wait毫秒内开始时执行

            typeof func === 'function' && func()

            timer = setTimeout(() => {

                flag = false

            }, wait)

        }

    } else if (!flag) {

        flag = true

        // 如果是非立即执行,则在wait毫秒内的结束处执行

        timer = setTimeout(() => {

            flag = false

            typeof func === 'function' && func()

        }, wait)

    }

}

export default throttle

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是防抖 函数防抖(debounce) 是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就...
    夕阳再美也会落幕阅读 1,560评论 0 1
  • 1、节流 多次调用方法,按照一定的时间间隔执行 这个方法的实现也是从Lodash库中copy的 /*** 节流,多...
    孤雁悲鸿影阅读 1,657评论 0 1
  • 一、html和css部分1、如何理解CSS的盒子模型?标准盒子模型:宽度=内容的宽度(content)+ bord...
    这是这时阅读 3,008评论 0 5
  • 一、前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 ...
    我讲你思阅读 3,720评论 0 1
  • 函数节流场景 例如:实现一个原生的拖拽功能(如果不用H5 Drag和Drop API),我们就需要一路监听mous...
    凡凡的小web阅读 4,187评论 0 0