/**
* 防抖原理:一定时间内,只有最后一次操作,再过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. Apache和Nginx有什么区别,如何选择?

    Apache和Nginx都是大名鼎鼎的Web服务器软件. 网上已经有非常多关于apache和nginx区别的文章了,笔者就不从专业技术的角度进行解说,而按照目前比较流行的架构方式进行阐述. 1.安全性 ...

  2. 声网把七年无全网事故的实时传输网络SD-RTN全面开放了——这就是FPA!

    8 月 19 日,声网Agora 举办线上产品发布会,正式发布了"全链路加速 FPA(Full-Path Accelerator)".全链路加速 FPA 基于声网的软件定义实时网络 ...

  3. python安装robotframework的一些常见的错误

    python安装robotframework的一些常见的错误 首先的电脑环境是x86的,然后下载的python版本起初是3.10.1的 在cmd 中出入pip install robotframwor ...

  4. 【Visual Leak Detector】QT 中 VLD 输出解析(一)

    说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记. 目录 说明 1. 使用方式 2. 无内存泄漏时的输出报告 1. 使用方式 在 QT 中使用 VLD 的方法可以查看另外几篇博客: [Vi ...

  5. 剑指 offer 第 1 天

    第 1 天 栈与队列(简单) 剑指 Offer 09. 用两个栈实现队列 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部 ...

  6. win10_Dock安装设置

    1.安装:(在win10上安装) 桌面版:https://www.docker.com/products/docker-desktop, 安装后重启电脑 2.配置 打开DockerDesktop,(可 ...

  7. 探究平台化设计的核心思想和Lattice的设计原则

    一. 平台对业务敏捷支撑的挑战 早期阿里的交易中台遇到了一些挑战,这个在毗卢的博客中有提到,主要遇到了这些问题:新小业务都有一个成长规律,在早期业务模式验证阶段,需要的玩法比较简单,希望能频繁的发布快 ...

  8. JS一切皆对象理解

    对象都是通过函数创建的 function Fn() { this.name = '王福朋'; this.year = 1988; } var fn1 = new Fn(); fn1是个对象,它是由函数 ...

  9. Mysql 局域网远程连接设置——Windows

    工作中,遇到mysql数据库存储于我的电脑上,而其他电脑需要共同进行读写数据(类似redis并发),所以我的电脑就必须开启mysql远程连接. 一. 授权 1. 连接数据库 mysql -uroot ...

  10. AcWing 1902. 马拉松

    题目链接 每次路程改变只对前后两点间距离有影响,因此每次都判断当前三个点之间的距离之和与去掉中间点的距离哪个更优即可,最后取最大值作为结果输出. #include<iostream> #i ...