防抖节流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 毫秒后

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

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

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

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

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

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

GGTalk 开源即时通讯系统源码剖析之:聊天消息防错漏机制

GGTalk 内部实现了多种机制以确保消息的可靠性(不会错漏消息和重复消息),那么这些机制具体是怎么实现的了?

Docker镜像下载慢/失败?Linux代理使用不便?想无Docker下载镜像?试试我这款开源项目吧

我要在这里放一段代码块 // 这是一段防爬代码块,我不介意被文章被爬取,但请注明出处 console.log("作者官网:https://www.hanzhe.site"); console.log("原文地址:https://www.cnblogs.com/hanzhe/p/18249602");

开源一个反sql注入的asp.net core中间件

现在公安有一个专门负责信息安全的部门,前几天公司就收到了一个整改通知,防sql注入的整改。 我们公司开始对网站进行了简单的测试,普通的sql都能检测出来。 但还是被发了整改通知,肯定有些sql注入的方法没测出来,于是我就开始查找了sql注入的手法。 sql注入主要有:基于注释、基于一般错误、基于时间

[4]自定义Lua解析器管理器-------演化脚本V0.7

使用自定义委托通过tolua来调用多返回值和长参数类型的函数。 防踩坑指南,使用自定义委托需要将委托类型添加到CustomSettings中。