javaScript节流与防抖
一、节流(throttle)
用来实现阻止在短时间内重复多次触发同一个函数。主要用途:防止使用脚本循环触发网络请求的函数的恶意行为,确保请求的真实性(当然也包括其他阻止高频触发行为的应用);
实现原理图:
代码实现:
//节流函数
function throttle(handler,wait){
var lastDate = 0;
return function(){
var newDate = new Date().getTime();
if(newDate - lastDate > wait){
handler.apply(this,arguments);
}
lastDate = newDate;
}
}
节流函数测试:
function foo(nub){
console.log(nub);
}
var han = throttle(foo,1000); //设置节流时间为1000毫秒
for(var i = 0; i < 100; i++){
han("1");//使用for调用执行节流函数han只能第一次被触发,因为程序的执行速度是微秒级的速度
}
二、防抖
用来实现高频触发函数调用时,实际只调用最后一次函数执行。主要用途:用于可能出现高频触发DOM结构或样式修改,导致的页面高频重排重绘,严重影响页面性能,同时也导致操作的DOM闪烁抖动的情况,造成体验效果差。(也包括其他阻止高频触发的用途)
代码实现:
//防抖函数
function antishake(handler,interval){
var lastDate = 0;
var time ;
return function(){
var self = this;
var args = arguments;
clearTimeout(time);
time = setTimeout(function(){
handler.apply(self,args);
},interval);
}
}
防抖函数测试:
<div id="nub">0</div>
<button id="but">点我</button>
<script>
var odiv = document.getElementById("nub");
var oBut = document.getElementById("but");
oBut.onclick = antishake(fun,1000);//一秒以内的连续点击只会触发一次
var num = 0;
function fun(){
odiv.innerText = ++num;
}
</script>
javaScript节流与防抖的更多相关文章
- [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北
网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...
- javaScript 节流与防抖
首先 我们要知道 节流与防抖可以干什么. 优化网络请求性能——节流 优化页面请求性能——防抖 举两个简单的小例子: 节流: 例如 有些购物页面,会有一些让你抢购的活动,到点的时候,需要你快速的点某个按 ...
- JavaScript节流与防抖函数封装
js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- JavaScript 中的防抖和节流
什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...
- JavaScript中的节流和防抖
节流: 在规定时间内,多次触发事件,但是只执行一次 场景:输入框搜索,地图渲染 优化用户体验 /** * 节流 规定时间内不管触发多少次只执行一次 * @param {Function} fn 实际要 ...
- JavaScript中函数防抖、节流
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- JS节流和防抖
事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize.window.mousemove等,触发的频率非 ...
- JS定时器实现函数节流和防抖 -简单实现对比 -适用地方
如题 (总结要点) 防止重复点击! 最近项目中遇见这个"函数抖动"的问题!快速点击前端xx按钮,造成数据多次加载进页面里,正常只显示10条数据,结果显示了20条数据,异常! 出现原 ...
随机推荐
- C之指针的加法
#include<stdio.h> #include<stdlib.h> main() { //char arr [] = {'H','e','l','l','o'}; int ...
- SQL Server 高级函数汇总【转】
看到一个帖子,博主收集的很全,里面涵盖了一些常用的内置函数,特此收藏下: 原文链接:https://blog.csdn.net/wang1127248268/article/details/53406 ...
- word内存不足 解决办法
word2013内存不足 解决办法具体操作如下: 尝试了很多方法和经验表示都没有效果,最后找到个有效果的分享给大家: 点击“文件”——选项——加载项“ 点左下的”管理“-” 转到“ 把加载项前面的 ...
- Flutter之切换导航TabBar组件
TabController 这是Tab页的控制器,用于定义Tab标签和内容页的坐标,还可配置标签页的切换动画效果等. TabController的创建有两种形式,一种是使用系统的DefaultTabC ...
- C#中设置自定义控件工具箱图标
在设计自定义控件时,系统默认生成的图标比较单一难看,如何为控件设计自己的图标呢,这里给出了一种基于ToolBoxBitmap 属性设置自定义控件工具箱图标的方法. 1)首先将图标文件名改为自定义控件名 ...
- python 实现对象去重
利用set()方法实现对象去重,重写__hash__方法和__eq__方法告诉程序什么样的对象是同一个对象 # 写一个类 拥有100个对象 # 拥有三个属性 name age sex # 如果两个对象 ...
- mysql学习笔记11_12(查询)
1.建表和插入值 创建company数据库 创建 department表 create table department(d_id int(10) primary key not null uniqu ...
- 【计算机视觉】深度相机(九)--OpenNI API及中间件说明
本文由官方文档翻译而来 总览 目的 OpenNI 2.0 API(应用程序编程接口)提供了访问PrimerSense的兼容深度传感器.这就使得一个应用程序能够初始化传感器和从设备接收深度(depth) ...
- JAVA计算字符串UTF-8字节数
String str = "C++/C#/JAVA软件开发"; try { System.out.println(str.getBytes("UTF-8").l ...
- elasticsearch数据库(ES)
1. http://blog.csdn.net/cnweike/article/details/33736429 http://www.oschina.net/translate/elasticsea ...