防抖节流utils
/**
* 防抖原理:一定时间内,只有最后一次操作,再过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的更多相关文章
- vue防抖节流函数---组件封装,防止按钮多次点击
1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...
- JS: 防抖节流
防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...
- vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- v-debounce-throttle是一个vue防抖节流指令
v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...
- 函数防抖节流的理解及在Vue中的应用
防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...
- vue 防抖节流函数——组件封装
防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...
- Vue 防抖节流获取this问题
1. 防抖 debounce(func, delay = 500) { let _this = this; let args = arguments; return (function () { if ...
- JavaScript防抖节流函数
1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
随机推荐
- mimikatz和procdump的密码抓取
mimikatz mimikatz功能很强大,主要使用就是提取明文密码.哈希.PIN码和Kerberos凭证. 常用的只有两条命令: 注意:运行时使用管理员身份运行 privilege::debug ...
- Go 语言:如何利用好 TDD 学习指针并了解 Golang 中的 error 处理
我们在上一节中学习了结构体(structs),Go语言:利用 TDD 驱动开发测试 学习结构体.方法和接口 它可以组合与一个概念相关的一系列值. 你有时可能想用结构体来管理状态,通过将方法暴露给用户的 ...
- 玩转Mybatis高级特性:让你的数据操作更上一层楼
目录 动态SQL 缓存机制 插件机制 自定义类型转换 总结 Mybatis高级特性能够帮助我们更加灵活地操作数据库,包括动态SQL.缓存机制.插件机制.自定义类型转换等.学习这些特性可以让我们更好地利 ...
- Spring配置类为什么要分Full和Lite模式
本文基于Spring 5.2.15-RELEASE 关于Spring配置类的Full模式和Lite模式,如果没有仔细阅读过源码或者官方文档的话,估计很多人都不知道这个概念.所以我们先来解释下这两个概念 ...
- 淘宝商品信息定向爬虫.py(亲测有效)
import requests import re def getHTMLText(url): try: kv = { 'cookie': '', #要换成自己网页的cookie 'user-agen ...
- JS中我们为什么要new个实例而不直接执行
正常情况:<script> function sayHello() { alert("hello") } sayHello();直接调用他 </script> ...
- 记录关于Chromium系浏览器密码安全问题的一些思考
首先就是在此之前就看到有相关报道讲到Chrome等浏览器密码都在本地明文存储,而且权限要求很低,任何程序都可以随意读取,这方面的安全问题暂且不表. 今天使用Edge时候发现浏览器储存的密码,在我已经设 ...
- [AIGC]GPT模型概述
2 Open AI: ChatGPT 2.0 ChatGPT 官网 https://openai.com/ https://platform.openai.com/ 原 : https://beta. ...
- [J2EE:中间件]LOG4J+Slf4J快速入门及日志最佳实践
1 概述 1.1 常见的Java日志框架及选择 commons-logging和slf4j(slf4j-api.jar)都是日志类库的接口,供客户端使用,而没有提供实现! log4j,logback等 ...
- 补五月三号java基础知识
1.泛型技术可以通过一种类型或方法操纵各种不同类型的对象,同时又提供了编译时的类型安全保证.2.容器(即集合)是以类库形式 提供的多种数据结构,用户在编程时可直接使用3.泛型其实质就是将数据的类型参数 ...