防抖节流utils

utils · 浏览次数 : 13

小编点评

```javascript let timeout = null; let flag; const debounce = (func, wait = 500, data, immediate = false) => { // 清除定时器 if (timeout !== null) clearTimeout(timeout); // 立即执行,此类情况一般用不到 if (immediate) { var callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait); if (callNow) typeof func === 'function' && func(data); } else { // 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法 timeout = setTimeout(() => { typeof func === 'function' && func(data); }, wait); } }; const throttle = (func, wait = 500, data, 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 { debounce, throttle }; ```

正文

/**
 * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */
let timeout = null;

const debounce = (func, wait = 500, data, immediate = false) => {
    // 清除定时器
    if (timeout !== null) clearTimeout(timeout);
    // 立即执行,此类情况一般用不到
    if (immediate) {
        var callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) typeof func === 'function' && func(data);
    } else {
        // 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(() => {
            typeof func === 'function' && func(data);
        }, wait);
    }
}



/**
 * 节流原理:在一定时间内,只能触发一次
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
let timer, flag;
const throttle = (func, wait = 500, data, 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);
        }

    }
};

module.exports = {
    debounce,
    throttle
}

 

与防抖节流utils相似的内容:

防抖节流utils

/** * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @retur

JavaScript实现防抖与节流

防抖(Debounce)和节流(Throttle)是两种常用的优化JavaScript性能的技术

vue项目使用lodash节流防抖函数问题与解决

背景 在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。 防抖函数_.debounce(func, [wait=0], [options=]) 创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后

低开开发笔记(八): 低代码编辑器实现撤销回退(命令模式,防抖处理)

好家伙, 0.代码已开源 https://github.com/Fattiger4399/ph_questionnaire-.git 1.事件触发 我们先从事件的触发开始讲起 大致上我们有两个思路可以选择 1.监控用户行为 2.监控数据变化 两种选择都会有较难处理的部分,这里我们先选第二个选项 关于

接口防刷!利用redisson快速实现自定义限流注解

问题: 在日常开发中,一些重要的对外接口,需要加上访问频率限制,以免造成资��损失。 如登录接口,当用户使用手机号+验证码登录时,一般我们会生成6位数的随机验证码,并将验证码有效期设置为1-3分钟,如果对登录接口不加以限制,理论上,通过技术手段,快速重试100000次,即可将验证码穷举出来。 解决思

iOS开发基础136-防暴力点击

要在Objective-C中创建一个高度可复用的工具类,以防止按钮的暴力点击,并且使用切面编程(AOP)的方式,我们可以考虑使用Aspects这个库来实现方法的拦截。以下是具体的实现步骤: 第一步:引入Aspects库 首先,需要将Aspects集成到项目中。Aspects是一个轻量级的AOP框架,

防火防盗防CDN流量盗刷

没想到自己的小破站也逃不掉被攻击的命,分分钟就给我刷欠费了。 本来不想写这篇文章的,但看到好多大佬(小林coding、 JavaGuide)近期cdn都被盗刷了。 还是来提醒下大家,防火防盗防cdn流量盗刷 事故时间:2024年7月5日晚8点左右 事故现场:好不容易到了周五,想着第二天就周末了,和朋

雷电模拟器改真机保姆级教程,游戏搬砖党必备!

游戏工作室今天分享最新防封电脑模拟器改真机技术,适用于所有模拟器搬砖游戏,有效防止电脑模拟器封禁问题。 游戏搬砖玩家可以像使用真机一样流畅地操作游戏,电脑模拟器可以模拟真机的运行环境,让游戏服务器难以察觉到运行设备的差异,从而起到防封的作用更加安全。 重要提示:要多开模拟器,每个模拟器,都新建,并用

面试官:你讲下接口防重放如何处理?

前言 我们的API接口都是提供给第三方服务/客户端调用,所有请求地址以及请求参数都是暴露给用户的。 我们每次请求一个HTTP请求,用户都可以通过F12,或者抓包工具fd看到请求的URL链接,然后copy出来。这样是非常不安全的,有人可能会恶意的刷我们的接口,那这时该怎么办呢?防重放攻击就出来了。 什

基于Vue3水印组件封装:防篡改守护!

基于Vue 3的全新水印通用组件封装。这款组件不仅功能强大,而且易于集成,能够轻松为您在网页任何位置添加自定义水印,有效防止内容被篡改或盗用。