/**
* 防抖原理:一定时间内,只有最后一次操作,再过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的更多相关文章

  1. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  2. JS: 防抖节流

    防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...

  3. vue防抖节流之v-debounce--throttle使用指南

    最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...

  4. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

  5. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  6. v-debounce-throttle是一个vue防抖节流指令

    v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...

  7. 函数防抖节流的理解及在Vue中的应用

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...

  8. vue 防抖节流函数——组件封装

    防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...

  9. Vue 防抖节流获取this问题

    1. 防抖 debounce(func, delay = 500) { let _this = this; let args = arguments; return (function () { if ...

  10. JavaScript防抖节流函数

    1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

随机推荐

  1. Javaweb学习笔记第十四弹---对于Cookie和Filter的学习

    Apache Tomcat - Tomcat Native Downloads 会话追踪技术 会话:打开浏览器,建立连接,直到一方断开连接,会话才会结束:在一次会议中,可以有多次请求. 会话追踪:在多 ...

  2. MySQL学习(七)varchar和char区别

    varchar:用于存储可变长字符串,是最常见的字符串数据类型.比定长类型更节省空间,因为它仅使用必要的空间.varchar需要使用1或2个额外字节记录字符串的长度:如果列的最大长度小于或等于255字 ...

  3. 给我一块画布,我可以造一个全新的跨端UI

    一.源起   作者是名超大龄程序员,曾涉及了包括Web端.桌面端.移动端等各类前端技术,深受这些前端技术的苦,主要但不限于: 每种技术编写代码的语言及技术完全不同,同样呈现形式的组件各端无法通用: 大 ...

  4. vulnhub靶场之HACKSUDO: SEARCH

    准备: 攻击机:虚拟机kali.本机win10. 靶机:hacksudo: search,下载地址:https://download.vulnhub.com/hacksudo/hacksudo-sea ...

  5. javaEE Web(Tomcat)深度理解 和 Servlet的本质

    javaEE Web(Tomcat)深度理解 和 Servlet的本质 每博一文案 我所有的进步,只为更接近你. 上天没有给予人们公平的人生,有人拥有出奇的才能,便有人只能不辞辛苦的攀登阶梯,我默默地 ...

  6. 【2019CCPC秦皇岛:A】Angle Beats 分类讨论 (unordered_map 加 hash)

    题意:n个给定点,q个询问点,每次询问给出一个坐标A,问从n中选定两个点B,C,有多少种方案使得ABC是个直角三角形. 思路:直角三角形能想的就那几个,枚举边,枚举顶点,这个题都行,写的枚举顶点的,A ...

  7. java 环境变量配置详细教程(2023 年全网最详细)

    前言: 在上一篇文章中,壹哥给大家重点讲解了 Java 实现跨平台的原理,不知道你现在有没有弄清楚呢?如果你还有疑问,可以在评论区留言- 之前的三篇文章,主要是理论性的内容,其实你暂时跳过不看也是可以 ...

  8. Windows7系统显存只有4GB

    Windows7安装后,专用视屏内存只有4GB可用,是不是Windows7不支持4G以上显存的显卡呢?之前在网上有人说,虽然系统显示可用只有4G显存,但是游戏内实际可以超过4G.本人没有特地去试验过. ...

  9. 最新版本 Stable Diffusion 开源 AI 绘画工具之汉化篇

    目录 汉化预览 下载汉化插件一 下载汉化插件二 下载汉化插件三 开启汉化 汉化预览 在上一篇文章中,我们安装好了 Stable Diffusion 开源 AI 绘画工具 但是整个页面都是英文版的,对于 ...

  10. Java泛型: 主要知识点总结

    Java泛型:主要知识点总结 1 泛型的好处 解决元素存储的安全性问题. 解决获取数据元素时,需要类型强制转换的问题. Java泛型可以保证如果程序在编译时没有发出警告,运行.时就不会产生ClassC ...