封装节流器

分手后的思念是犯贱 2021-09-02 09:23 279阅读 0赞

/**
     * Throttle方法可以实现两种功能
     * 		1: 开启节流器 Throttle(fn, {})
     *			@fn: 要节流的函数
     * 			@options 配置对象
     *				@context 执行时候的上下文(this)
     * 				@args 原函数所需要的参数
     *				@time 决定延迟的时间
     *			
     *		2: 关闭节流器 Throttle(false, fn)
     *			@fasle 是一个标识， 当传递false的时候 说明是要关闭节流器了
     *			@fn 要节流的函数
     *
     *
     *********/
    
    function Throttle(fn, options) {
    	// 判断fn传递的是函数还是布尔值
    	if (typeof fn === "function") {
    		// 说明要开启节流器了
    		// console.log("开启");
    
    		// 配置信息
    		options = options || {
    			context: document,
    			args: [],
    			time: 1000
    		}
    
    		// 清除之前的延时器
    		clearTimeout(fn.__throttle);
    
    		// 由于每一个函数要对应一个节流器，所以给fn添加一个自定义属性
    		fn.__throttle = setTimeout(function() {
    			fn.apply(options.context, options.args);
    		}, options.time);
    	} else if (typeof fn === "boolean") {
    		// 说明要关闭节流器
    		// console.log("关闭");
    		// 此时fn 表示false, options表示要节流的函数
    		clearTimeout(options.__throttle);
    	}
    }
    
    
    
    
    
    调用封装的方法
    function aaa()｛
    
    ｝
    
    //开启节流  事件中
    Throttle(aaa, {
    	    context: document,
                args: [],
                time: 5000
               });
    
    //关闭节流
    Throttle(false,aaa)

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 day25_ajax(原生，封装，跨域——面试重点，节流)

零碎 > 1. 居中显示：水平居中`margin auto`;竖直居中设置`绝对定位`，上下左右设置`0`； 1. `event.stopPropagati...

深藏阁楼爱情的钟/ 2024年04月18日 23:25/ 0 赞/ 79 阅读

相关 vue3+ts封装全局节流函数

在Vue3项目中，我们经常需要用到防抖和节流函数来优化性能。本文将介绍如何使用TypeScript来封装一个全局的节流函数。什么是节流函数节流函数是一种限制函数执行

向右看齐/ 2024年03月17日 12:01/ 0 赞/ 22 阅读

相关 vue3+ts封装全局节流和防抖函数

在Vue3 + TypeScript项目中，为了优化性能，经常需要使用节流和防抖函数来控制函数的执行频率。这里我们可以封装全局的节流和防抖函数，方便在整个项目中使用。封装

青旅半醒/ 2023年10月12日 22:56/ 0 赞/ 46 阅读

相关节流Axios_节流Axios实践

　　前言一、安装 Vue CLI二、构建前端项目1.通用方法2.使用 IDE (IntelliJ IDEA)三、Vue 项目结构分析1.概览2.index.html3.App.

左手的ㄟ右手/ 2023年09月25日 12:09/ 0 赞/ 77 阅读

相关微信小程序 - 函数防抖 / 函数节流（轮子封装）

前言如果你不了解这两个概念，请读完前面，如果你了解，请直接复制代码使用即可。 > 函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一

亦凉/ 2022年11月24日 12:58/ 0 赞/ 323 阅读

相关 JS_js选择器封装

选择器封装 const $ = name => document.querySelector(name); 使用 $('.submit') //

我不是女神ヾ/ 2022年11月04日 11:19/ 0 赞/ 243 阅读

相关 java 文件封装_Java字节流文件封装

/\\\ 字节流封装方法\/ importjava.io.FileInputStream;importjava.io.FileNotFoundException;import

本是古典何须时尚/ 2022年11月03日 10:47/ 0 赞/ 47 阅读

相关 Servlet过滤器与封装器

　　在Servlet容器调用某个Servlet的service()方法前，Servlet并不会知道有请求的到来，而在Servlet的service()方法运行之后，容器真正对浏

超、凢脫俗/ 2022年06月15日 05:44/ 0 赞/ 116 阅读

相关封装和隐藏、构造器

1. 如果通过对象.属性的方式不方便（动物只有四条腿，腿的数量不能是负数），则可以采用对象.方法的形式完成对属性值的操作。 2. 为了避免对象直接调用属性，把属性设置为私有

喜欢ヅ旅行/ 2022年03月25日 02:28/ 0 赞/ 150 阅读

相关封装节流器

/ Throttle方法可以实现两种功能 1: 开启节流器 Throttle(fn, {}) @fn: 要节流的函数

分手后的思念是犯贱/ 2021年09月02日 09:23/ 0 赞/ 280 阅读