js实现防抖,节流
防抖函数。
将几次操作合并为一次操作进行。设置一个计时器,规定在延迟时间后触发函数,但是在延迟时间内如果再次触发,就会取消之前的计时器。如此,只有最后一次操作能触发。代码如下:
function debounce(fn,wait){
let timer=null;
return function(){
let args=arguments,that=this;
timer&&clearTimeout(timer);
timer=setTimeout(function(){fn.apply(that,args)},wait)
}
}
节流函数。
一定时间内只触发一次函数。并且开始触发一次,结束触发一次。代码如下:
function throttle(fun, delay){
let timer = null;
let startTime = Date.now();
return function(){
let curTime = Date.now();
let remain = delay - (curTime - startTime);
let that = this;
let args = arguments;
clearTimeout(timer);
if(remain <= 0){
fun.apply(that,args);
startTime = Date.now();
}else{
timer = setTimeout(fun, remain);
}
}
}
js实现防抖,节流的更多相关文章
- JS的防抖与节流
JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...
- JS的防抖和节流
数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...
- js函数的节流与防抖
一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...
- js函数的节流和防抖
js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repai ...
- JS: 防抖节流
防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...
- vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...
- vue防抖节流函数---组件封装,防止按钮多次点击
1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
随机推荐
- Python之路,Day1 - Python基础1 --转自金角大王
本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...
- TIJ——Chapter Six:Access Control
package:the library unit The levels of access control from "most access" to "least ac ...
- 记一次Celery的仇
背景:项目在公司的一台虚拟机上运行(32核+32G).其他人的项目也在这台物理机上运行..我的训练代码是单进程的,跑完一次需要大约10h(数据量大逮着一个核使劲跑..):训练是一个Celery定时任务 ...
- ios7.1安装提示"无法安装应用程序 由于证书无效"的解决方式二(dropbox被封项目转移到Appharbor上)
6月18日起dropbox被天朝封了(这个真是无力吐槽),而ios7.1要求使用ssl安全连接,则须要又一次找到一个支持https的免费server. Appharbor是个不错的选择,操作简单.此外 ...
- MySQL按时间统计每个小时记录数
MySQL按时间统计每个小时记录数 方案1: ? 1 2 3 4 5 6 7 SELECT @rownum := @rownum + 1 AS ID, CONCAT((CASE WH ...
- qt开发ROS遇到这个问题 find_package(catkin) failed. catkin was neither found in the workspace nor in the CMAKE_PREFIX_PATH...
为了实现用Qt开发ROS界面开发环境,我几乎参阅了网上所有的配置教程,安装了多个版本的qt,在ubuntu14.04和ubuntu16.04上分别进行了配置,最后都成功了.不得不说的是用QTCREAT ...
- @hdu - 5960@ Subsequence
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定如下计算序列权值的函数: 对于一个由三元组 (cost0, ...
- Firefox浏览器怎么安装adobe flash player插件
https://jingyan.baidu.com/article/0a52e3f435d171bf62ed7237.html 有些朋友在使用Firefox火狐浏览器,但是火狐浏览器安装以后是没有fl ...
- 1月房地产企业销售TOP100出炉 万科重回第一
1月房地产企业销售TOP100出炉 万科重回第一 2017-02-05 07:40:32 来源:腾讯新闻 责任编辑: [摘要]TOP100房企1月的销售金额合计4311.8亿元,销售面积合计3648. ...
- Jmeter json处理器