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 ...
随机推荐
- 百度网盘直链下载助手(MacOS&Chrome)
简介 众所周知,通过百度网盘(未开通会员)直接下载文件的速度极慢,通过安装浏览器插件可以极大的提高下载速度. 安装文件 Tampermonkey NeatDownloadManager Extensi ...
- Java中try catch finally语句中含return语句的执行情况总结-编程陷阱
前言:有java编程基础的人对java的异常处理机制都会有一定了解,而且可能感觉使用起来也比较简单,但如果在try catch finally语句块中遇到return语句,开发者可能就会遇到一些逻辑问 ...
- 2019-10-21-WPF-多个-StylusPlugIn-的事件触发顺序
title author date CreateTime categories WPF 多个 StylusPlugIn 的事件触发顺序 lindexi 2019-10-21 08:33:15 +080 ...
- 微服务开源生态报告 No.2
通常,我们都会通过在 GitHub 上订阅邮件列表,来了解社区动态.这一次,我们联合以上各开源项目的负责人,发布「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源 ...
- Linus 本尊也来了!为什么 KubeCon 越来越火了?
2015年11月,第一届 KubeCon 在美国旧金山开始的时候,还只是个200人的小会议,2019年的7月,KubeCon 第二次在中国举办,就有 3500 多位云原生和开源领域工程师齐聚一堂. 连 ...
- 前端基础☞CSS
css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="background-color: ...
- Liunx vi/vim 2
移动光标的方法 H 光标移动到这个屏幕的最上方那一行的第一个字符 M 光标移动到这个屏幕的中央那一行的第一个字符 L 光标移动到这个屏幕的最下方那一行的第一个字符 G 移动到这个档案的最后一行(常用 ...
- 2019-8-31-dotnet-通过-WMI-获取系统补丁
title author date CreateTime categories dotnet 通过 WMI 获取系统补丁 lindexi 2019-08-31 16:55:59 +0800 2019- ...
- @codeforces - 590E@ Birthday
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 n 个互不相同的只包含 'a', 'b' 的字符串. 请选 ...
- 谷歌BERT预训练源码解析(三):训练过程
目录前言源码解析主函数自定义模型遮蔽词预测下一句预测规范化数据集前言本部分介绍BERT训练过程,BERT模型训练过程是在自己的TPU上进行的,这部分我没做过研究所以不做深入探讨.BERT针对两个任务同 ...