js、vue防抖函数、节流函数,工具类封装

防抖函数(可用于防止重复提交)

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。

/**
 * 防抖函数(可用于防止重复提交)
 * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,
 * 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,
 * 且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。
 *
 * @param func 执行函数
 * @param wait 间隔时间
 * @param immediate 立即执行
 */
function debounce(fn, wait, immediate) {
    let timer;
    return function() {
        if (timer) clearTimeout(timer);
        if (immediate) {
            // 如果已经执行过,不再执行
            var callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            if (callNow) {
                fn.apply(this, arguments)
            }
        } else {
            timer = setTimeout(() => {
                fn.apply(this, arguments)
            }, wait);
        }
    }
}

节流函数

当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次
用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法:时间戳和定时器

/**
 * 节流函数
 * 当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发
 * 小于既定值,函数节流会每隔这个时间调用一次
 * 用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行
 * 实现函数节流我们主要有两种方法:时间戳和定时器
 *
 * @param func 执行函数
 * @param wait 间隔时间
 * @param options 立即执行
 * options中  leading:false 表示禁用第一次执行 trailing: false 表示禁用停止触发的回调
 */
function throttle(fn, wait, options = {}) {
    let timer;
    let previous = 0;
    let throttled = function() {
        let now = +new Date();
        // remaining 不触发下一次函数的剩余时间
        if (!previous && options.leading === false) previous = now;
        let remaining = wait - (now - previous);
        if (remaining < 0) {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            previous = now;
            fn.apply(this, arguments)
        } else if (!timer && options.trailing !== false) {
            timer = setTimeout(() => {
                previous = options.leading === false ? 0 : new Date().getTime();
                timer = null;
                fn.apply(this, arguments);
            }, remaining);
        }
    }
    return throttled;
}

原文地址:https://www.cnblogs.com/sunshouguo/p/11727742.html

时间: 2024-11-05 22:39:34

js、vue防抖函数、节流函数,工具类封装的相关文章

防抖和节流函数最简版

防抖和节流函数最简版 防抖: 多次触发事件只执行一次(适用于断续的事件, 比如 click.input) 1 function debounce(fn, time) { 2 let timeout 3 return () => { 4 if (timeout) { 5 clearTimeout(timeout) 6 } 7 timeout = setTimeout({ 8 fn 9 }, time) 10 } 11 } 节流: 在指定时间内多次触发事件只执行一次(适用于连续的事件, 比如 scr

JS的防抖和节流

数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它被触发的频次非常高,间隔很近.如果事件中涉及到大量的位置计算.DOM 操作.元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成,就会造成浏览器掉帧.加之用户鼠标滚动往往是连续的,就会持续触发 scroll 事件导致掉帧扩大.浏览器 CPU 使用率增加.用户体验受到影响.尤其是在涉及与

函数节流 函数节流

// 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300); }; // 函数防抖 var

【Cocos2d-x Lua】http工具类封装

实现 该工具类对Cocos2d-x中的HttpClient进行了封装,使可以在Lua中实现http异步请求. LuaHttpClient.h #ifndef __LUAHTTPCLIENT_H__ #define __LUAHTTPCLIENT_H__ #include "cocos2d.h" USING_NS_CC; #include "cocos-ext.h" USING_NS_CC_EXT; // 参数封装类 class LuaParams{ public:

Android 常见工具类封装

1,MD5工具类: public class MD5Util { public final static String MD5(String s) { char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' }; try { byte[] btInput = s.getBytes(); // 获得MD5摘要算法的 MessageDigest 对象 Mes

fastdfs-client-java工具类封装

FastDFS是通过StorageClient来执行上传操作的 通过看源码我们知道,FastDFS有两个StorageClient工具类. StorageClient的上传方法upload_file(...)返回的是字符串数组String[], 如[group1,M00/00/00/wKgAb1dBK2iANrayAA1rIuRd3Es112.jpg] StorageClient1的上传方法upload_file(...)返回的是字符串数组String, 如group1/M00/00/00/wK

utils部分--一些通用的工具类封装

1.简介 utils部分是对一些常用的工具类进行简单的封装,使用起来比较方便.这里列举常用的一些. 2.ContextUtils使用 主要封装了网络判断.一些方法解释如下: ? 1 2 3 4 5 6 7 8 //判断是否存在网络连接 public static boolean hasNetwork(Context context); //判断GPS是否打开 public static boolean isGpsEnabled(Context context); //SD卡是否可用 public

Android Sqlite 工具类封装

鉴于经常使用 Sqlite 数据库做数据持久化处理,进行了一点封装,方便使用. 该封装类主要支持一下功能 支持多用户数据储存 支持 Sqlite数据库升级 支持传入 Sql 语句建表 支持 SQLiteDatabase 基本操作.比如:execSQL.rawQuery.insert等等 解决了数据库并发问题 先贴上封装类代码 /** * * @ClassName: DataBaseOpenHelper * @Description: 数据库工具类 * @author lhy * @date 20

常用工具类封装

日期转换工具类 CommUtil.java [java] view plain copy package com.util; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; /** * 日期转换工具类 */ public class CommUtil { /** * 将日期格式转换成yyyy-MM-dd的字符串格式 * 返回值如:2010-10-06 * @par