JavaScript实现防抖节流函数
review
防抖函数
防抖函数一般是短时间内多次触发，但是只有最后一次触发结束后的delay秒内会去执行相对应的处理函数。
相当于一个赛道里面一次只能跑一辆赛车，如果此时已经有一辆赛车在跑道里面跑，但是又进来了一辆，那么之前那一辆赛车就会被清空。知道有一辆赛车到达终点，然后执行函数。
也就是说，防抖函数多次触发，但是一段时间内触发的n次，最后只能有一次会执行。
节流函数
节流函数如果也用赛车的案例来举例，就是说：
一个赛道里面，如果此时已经有了一辆赛车，那么其他想要进入赛道的赛车就会被阻止，直到前一辆赛车进去以后，才会被允许进入一辆新赛车。
下面的代码中我实现了两种版本的节流函数：
- 第一次触发立即执行（使用时间戳）
- 第一次触发，需要等待delay秒之后才执行
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖节流</title>
<style>
div {
width: 300px;
height: 300px;
background: #000;
}
</style>
</head>
<body>
<input type="text">
<div></div>
</body>
<script>
const input = document.getElementsByTagName('input')[0];
input.addEventListener('input', queryD(dosomething, 2000));
function dosomething() {
console.log('do some thing');
}
// 防抖函数(触发后delay秒内不能再触发，否则重新计时)
// 可以应用于需要频繁发送请求的场景下
function queryD(func, delay) {
console.log('in query d');
let time = null
return function () {
clearTimeout(time);
time = setTimeout(func, delay);
}
}
//----------------------------------------------------
const div = document.querySelector('div');
div.addEventListener('touchmove', cost(dosomething, 500));
div.addEventListener('touchmove', useDate(dosomething, 500));
// 节流函数(一段时间内只能发生一次)
// 第一次执行也需要在delay秒之后
function cost(func, delay) {
let time = null;
return () => {
if (!time) {
time = setTimeout(() => {
func();
time = null;
}, delay);
}
}
}
// 使用date实现节流函数
// 可以立即执行，下一次执行需要等待delay秒之后
function useDate(func, delay) {
let time = new Date().getTime();
return () => {
const cur = new Date().getTime();
if (cur - time > delay) {
time = cur;
func();
}
}
}
</script>
</html>
JavaScript实现防抖节流函数的更多相关文章
- JavaScript防抖节流函数
1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- JS基石之-----防抖节流函数
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...
- vue防抖节流函数---组件封装,防止按钮多次点击
1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...
- vue 防抖节流函数——组件封装
防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- JavaScript：防抖与节流
①防抖: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 详解防抖函数（debounce）和节流函数（throttle）
本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...
- Javascript性能优化之节流函数
在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventLis ...
- JS奇淫巧技：防抖函数与节流函数
应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
随机推荐
- 如何做好技术 Team Leader？
简介: 作为一个技术TL(Team Leader),除了自身技能,还会面临诸多团队管理上的困难和挑战.如何定义和明确团队的目标?怎样建立优秀的工程文化?让团队长期发挥战斗力和创新能力的核心是什么?本文 ...
- Nacos 2.0 性能提升十倍，贡献者 80% 以上来自阿里之外
简介: 3 月 20 日,Nacos 2.0 正式发布.Nacos 是阿里巴巴在 2018 年开源的一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台,也可以理解为微服务的注册中心 + 配 ...
- [BEX] Quasar BEX 提供的那些配置
Manifest.json https://developer.chrome.com/extensions/manifest Background Script & Content Scrip ...
- UWP 写入图片 Exif 信息
本文告诉大家如何在 UWP 中,保存图片的时候,写入 Exif 信息,也就是如照片的 相机型号 制造商 光圈值等信息的写入 在 UWP 中,保存图片或照片需要用到图片编码器,在使用编码器写入前可以设置 ...
- 3种方式自动化控制APP
自动化控制APP不管是在工作还是生活方面,都可以帮助我们高效地完成任务,节省时间和精力.本文主要介绍自动化控制APP的3种常用方式. 1.Python + adb 这种方式需要对Android有一些基 ...
- SQL server 游标使用实例
--创建一个游标 DECLARE my_cursor CURSOR FOR SELECT id, Bran_number, Bran_taxis FROM dbo.Base_Branch; --打开游 ...
- vue应用el-tabel封装
<template> <div class="table"> <el-table :data="tableList" style= ...
- CMake 教程（待完善）
Cmake 教程 写在前面 如果工程只有几个文件,直接编写Makefile更直接明了 如果使用C.C++.之外的语言,请不要使用cmake 如果使用的语言有非常完备的构建体系,不需要使用cmake C ...
- 源码研习 — TVM中的IR设计与技术实现
一.关键问题 TVM中的 IR 是什么,架构设计上分几层? 解答:TVM的整体结构图如下: 概念上,分为两层:上层为面向前端组网的Relay IR, 下层为面向LLVM的底层 IR. 但从设计实现上, ...
- 报错：Client does not support authentication protocol requested by server； consider upgrading MySQL cli
IDEA启动项目登录时显示用户或密码错误 或者 连接mysql数据库时报错 原因: mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是ca ...