ege限制鼠标移动的函数_浅谈函数节流和函数防抖

ea12572cc799439d545293128270cf2c.png

什么是函数节流和函数防抖?下面本篇文章就来给大家浅谈一下函数节流和函数防抖。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

a906e138ae5ff7503e61d5f63aa76ad9.png

前言

事件的触发权很多时候都属于用户,有些情况下会产生问题:

  • 向后台发送数据,用户频繁触发,对服务器造成压力
  • 一些浏览器事件:window.onresize、window.mousemove等,触发的频率非常高,会造成浏览器性能问题

如果你碰到这些问题,那就需要用到函数节流和防抖了。

一、函数节流(throttle)

函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次
有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效。

1.如何实现

其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环;

 html,body {height: 500%; // 让其出现滚动条
}
function throttle(fn, delay) {// 记录上一次函数触发的时间var lastTime = 0;return function() {// 记录当前函数触发的时间var nowTime = Date.now();if (nowTime - lastTime > delay) {// 修正this指向问题fn.call(this);// 同步时间lastTime = nowTime;}}
}
document.onscroll = throttle(function() {console.log('scroll事件被触发了' + Date.now()) }
, 200)

5ab436723c3de55b825f014d9e85be99.gif

上例中用到了闭包的特性--可以使变量lastTime的值长期保存在内存中。

2.函数节流的应用场景

需要间隔一定时间触发回调来控制函数调用频率:

  • DOM 元素的拖拽功能实现(mousemove)
  • 搜索联想(keyup)
  • 计算鼠标移动的距离(mousemove)
  • Canvas 模拟画板功能(mousemove)
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
  • 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次

二、函数防抖(debounce)

防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。

1.如何实现

其原理就第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。

<button id='btn'>按钮</button>
<script type="text/javascript">
function debounce(fn, delay) {// 记录上一次的延时器var timer = null;return function() {// 清除上一次延时器clearTimeout(timer)timer = setTimeout(function() {fn.apply(this)}, delay)}
}
document.getElementById('btn').onclick = debounce(function() {console.log('点击事件被触发' + Date.now())
}, 1000)
</script>

69dbb8dfa6f8bd89697e592a1dcf4292.gif

上例中也用到了闭包的特性--可以使变量timer的值长期保存在内存中。

2.函数防抖的应用场景

对于连续的事件响应我们只需要执行一次回调:

  • 每次 resize/scroll 触发统计事件
  • 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)

三、总结

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发,而一个方法之所以会被频繁触发,大多数情况下是因为 DOM 事件的监听回调,而这也是函数节流以及防抖多数情况下的应用场景。

参考文章

函数节流与函数防抖

JavaScript 函数节流和函数去抖应用场景辨析

函数节流、函数防抖实现原理分析

本文转载自: https://segmentfault.com/a/1190000017229182

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

〖Demo〗-- HAproxy配置文件操作

【HAproxy配置文件操作】 要求 1. 根据用户输入输出对应的backend下的server信息2. 可添加backend 和sever信息3. 可修改backend 和sever信息4. 可删除backend 和sever信息5. 操作配置文件前进行备份6 添加server信息时&#xff0c;如果ip已经存在则修改;如果backend不存在则创…

centos调整页面大小_这2种方法都能调整PDF文档的纸张大小

PDF文件大家都很熟悉了&#xff0c;在工作中是经常会遇到的&#xff0c;但是想对PDF文件进行修改和编辑的可能很多人都觉得为难。比如当你在阅读PDF文件时&#xff0c;发现PDF文档的页面尺寸不是自己想要的尺寸&#xff0c;要如何修改PDF的纸张大小呢&#xff1f;以下介绍2种简…

罗小黑用flash做的_中影星美好看罗小黑战记正式定档!

《罗小黑战记》定档的消息一发出&#xff0c;原微博已被转发45000次&#xff0c;大家真是太激动啦~罗小黑官博下热闹非凡在B站也同样壮观原是猫妖的小黑&#xff0c;在盗取宝珠后逃走&#xff0c;但被发现&#xff0c;而化为了一只猫&#xff0c;在街头流浪时&#xff0c;被小白…

An Overview of Cisco IOS Versions and Naming

An Overview of Cisco IOS Versions and Naming http://www.ciscopress.com/articles/article.asp?p2106547 By Sean Wilkins.Article is provided courtesy of Cisco Press.Date: Jun 28, 2013.SaveDiggDel.icio.usPrint Article Information Article Description   Versio…

click事件的累加绑定

click事件的累加绑定&#xff0c;绑定一次点击事件&#xff0c;执行多次。 在页面中为一个元素绑定事件&#xff0c;事件执行后页面未刷新且元素还在&#xff0c;然后你再次点击&#xff0c;元素又被绑定一个点击事件&#xff0c;这样第二次点击就会执行两次&#xff0c;以此类…

ubuntu 查找qt是否安装_Ubuntu Qt 安装教程--快速下载连接(网盘)

做个笔记以便忘了&#xff08;这个笔记我用到三次了&#xff0c;现在都能记住步骤了&#xff0c;Ubuntu也装了四五次了。折腾。。。&#xff09;先下载Qt的安装包 .run文件 &#xff08;三个途径下载&#xff09;1官方&#xff1a; http://download.qt.io/archive/qt/5.12/5.12…

C# 代理访问页面并获取数据

本来在找IWebDriver使用代理的方法&#xff0c;偶然获知这种的&#xff0c;记录并且共享 1 WebProxy proxyObject new WebProxy("125.31.19.26", 80);//str为IP地址 port为端口号 代理类2 HttpWebRequest Req (HttpWebRequest)WebRequest.Create("http://ip.c…

vscode用鼠标滚轮_前端开发神器 VSCode 使用总结

前端开发神器 VSCode 使用总结VSCode 是微软出品的&#xff0c;基于 Electron 和 TypeScript 的&#xff0c;集成了 git 版本管理和命令行终端&#xff0c;而且开源稳定&#xff0c;插件丰富&#xff0c;再搭配一款 Chrome 浏览器&#xff0c;可以说是前端开发神器了。安装指南…

python3 os_Python3 标准库:os

1.重命名import osos.rename(test.txt,x.txt) #重命名文件或目录imageimport osos.renames(a/123.txt,a/b/h.txt) #递归重命名文件image2.列出目录中的子目录和文件import osfilesos.listdir()for i in files:print(i)输出结果:image3.列出当前目录下的文件和文件夹以及文件夹下…

微信iOS收款到账语音提醒开发总结

本文来自于腾讯Bugly公众号&#xff08;weixinBugly&#xff09;&#xff0c;未经作者同意&#xff0c;请勿转载&#xff0c;原文地址&#xff1a;https://mp.weixin.qq.com/s/yYCaPMxHGT9LyRyAPewVWQ 作者&#xff1a;littleliang 一、背景 为了解决小商户老板们在频繁交易中不…

itextpdf添加表格元素_java使用iText生成pdf表格详解

首先需要你自己下载itext相关的jar包并添加引用&#xff0c;或者在maven中添加如下引用配置&#xff1a;com.lowagieiText2.1.5com.lowagieiText-rtf2.1.4com.lowagieiTextAsian2.1.4如下代码&#xff1a;package com.iText.create;import java.awt.Color;import java.io.File;…

Python map() 函数

功能&#xff1a;根据提供的函数对指定序列做映射 第一个参数 function 以参数序列中的每一个元素调用 function 函数&#xff0c;返回包含每次 function 函数返回值的新列表。 语法&#xff1a;map(function, iterable, ...) 参数&#xff1a;function:函数 iterable:一个或多…

vue的视图化创建项目_vue-cli3用图形化的方式创建项目

Vue脚手架可以快速生成Vue项目基础的架构。A.安装3.x版本的Vue脚手架&#xff1a;npm install -g vue/cliB.基于3.x版本的脚手架创建Vue项目&#xff1a;1).使用命令创建Vue项目命令&#xff1a;vue create my-project选择Manually select features(选择特性以创建项目)勾选特性…

Jmeter连接Mysql

1、将mysql-connector-java-5.1.7-bin.jar放入Jmeter安装目录的bin文件夹中 2、在顶层目录<测试计划>中加载驱动 3、添加JDBC Connection Configuration 4、配置数据库信息 1&#xff09;Variable Name不能为空 2&#xff09;DataBase URL 格式为&#xff1a;jdbc:mysql:…

胃net的放大内镜_李锐:内镜下的早癌诊断

写在前面&#xff1a;这是一篇很专业的文章&#xff0c;因为很多术语对于大多数朋友来说看的不是很明白。简单讲&#xff0c;这是让消化内镜医生看的&#xff0c;说的是怎么样才能发现更多的早癌。这里需要说明一下&#xff0c;很容易造成误解&#xff1a;早癌就在那里&#xf…

单线程多线程_面试系列 redis为什么快amp;单线程amp;多线程

redis为什么这么快C语言实现&#xff0c;执行速度快纯内存操作&#xff0c;数据读写在内存中&#xff0c;异步持久化到磁盘丰富和高效的数据结构基于非阻塞的I/O多路复用机制单线程避免了上下文切换Redis单线程redis单线程的核心就是它基于一个假设&#xff1a;它在内存中执行的…

官方太空射击游戏总结

很大一部分问题是碰撞体&#xff0c;刚体&#xff0c;还有碰撞器里面Is Trigger的勾选问题。这些问题在上一篇里面解释的很清楚了。实现石头自动旋转功能&#xff1a;GetComponent<Rigidbody>().angularVelocity Random.insideUnitSphere * tumble;实现石头一波一波下降…

c语言float二进制输出代码_C语言学习笔记——学前知识概述

将我大一学习C语言时做的笔记拿来与大家分享&#xff0c;内容比较浅显&#xff0c;比较适合初学者&#xff0c;如有错误还请见谅&#xff0c;提出改正&#xff0c;谢谢&#xff01;前言&#xff1a;此C语言笔记是本人在自学时记录的一些重点或初学者常犯的错误&#xff0c;希望…

[Codevs] 1081 线段树练习 2 ----“分块!”

1081 线段树练习 2 时间限制: 1 s空间限制: 128000 KB题目等级 : 大师 Master题目描述 Description给你N个数&#xff0c;有两种操作 1&#xff1a;给区间[a,b]的所有数都增加X 2&#xff1a;询问第i个数是什么&#xff1f; 输入描述 Input Description第一行一个正整数n&#…

github上的python爬虫_python爬虫入门(2):让你的github项目火起来

最近闲的比较无聊&#xff0c;于是想做一个自动star你的项目的爬虫玩玩。不然star数太低了&#xff0c;也比较难看。思路是准备注册成批的github帐号&#xff0c;然后挨个给你点star。STEP.1 工具准备我用的是python 2.7.10&#xff0c;本次实验不需要下载依赖库&#xff0c;用…