js 防抖 debounce 与 节流 throttle
debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化。都是为了避免在短时间内重复触发(比如scrollTop等导致的回流、http请求等)导致的资源浪费问题。
debounce与throttle的区别主要在于:
1. debounce是通过设置定时器,在延迟的时间内每次触发都会重置定时器,直到在某个延迟时间点内不再触发事件才会执行。
2. throttle也是通过设置定时器,只是在延迟时间内用户只有首次触发是有效的,其他触发都是无效的,只有等延迟时间到了才会执行该事件。
理论有点枯燥,直接看代码:
<!DOCTYPE html>
<html>
<head>
<title>debounce</title>
<style type="text/css">
#box {
width: 300px;
height: 150px;
border: 1px solid #eee;
background-color: #e3e3e3;
}
</style>
</head>
<body>
<div id="box"></div> <script type="text/javascript">
let divEle = document.querySelector('#box');
let count = 0;
divEle.addEventListener('mousemove', debounce(cbFn, 1000)); function debounce(callback, delay) {
let timer = null;
return function() {
timer && clearTimeout(timer);
timer = setTimeout(function(){
callback.apply();
}, delay)
}
} function cbFn() {
divEle.innerHTML = ++count;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>throttle</title>
<style type="text/css">
#box {
width: 300px;
height: 150px;
border: 1px solid #eee;
background-color: #e3e3e3;
}
</style>
</head>
<body>
<div id="box"></div> <script type="text/javascript">
let divEle = document.querySelector('#box');
let count = 0;
divEle.addEventListener('mousemove', throttle(cbFn, 1000)); function throttle(callback, delay) {
let preTime = new Date().getTime();
return function() {
const now = new Date().getTime();
if (now - preTime > delay) {
preTime = now;
setTimeout(function() {
cbFn();
}, delay)
}
}
} function cbFn() {
divEle.innerHTML = ++count;
}
</script>
</body>
</html>
js 防抖 debounce 与 节流 throttle的更多相关文章
- 防抖debounce和节流throttle
大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...
- js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...
- js 函数的防抖(debounce)与节流(throttle)
原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...
- Java版的防抖(debounce)和节流(throttle)
概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时. 防抖,即如果短时间内大量触发同一事件,都会 ...
- 防抖(Debounce)与节流( throttle)区别
http://www.cnblogs.com/ShadowLoki/p/3712048.html http://blog.csdn.net/tina_ttl/article/details/51830 ...
- JavaScript 防抖(debounce)和节流(throttle)
防抖函数 触发高频事件后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 /** * * @param {*} fn :callback function * @param {* ...
- C#.Net下的防抖-Debounce和节流阀-Throttle功能实现
C#下的防抖-Debounce.节流阀-Throttle功能实现 防抖-Debounce 连续的多次调用,只有在调用停止之后的一段时间内不再调用,然后才执行一次处理过程. 节流阀-Throttle 连 ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
随机推荐
- Log4Net 常见格式说明(不断更新中)
用户名 %username pc版本 另起一行 %newline
- laravel框架安装Curl扩展
然后进入根目录执行命令 composer update 完毕.
- [GXOI/GZOI2019]旧词
很像LNOI 2014 LCA那道题. 同样的套路,离线以后直接扫描线. k=1的话就是原题. 考虑一般情况. 原本的做法是对x到根的这条链做一下区间+1操作,目的是为了是的在深度为i的位置得到的贡献 ...
- springmvc请求参数异常统一处理
1.ExceptionHandlerController package com.oy.controller; import java.text.MessageFormat; import org.s ...
- JAVA写接口傻瓜(?)教程(一)
当一个安卓开发人员/微信小程序开发者想做点什么的时候,如果他发现没有合适的接口,那么单机安卓.本地数据库emmm.没了接口就好像老人没了拐杖.盲人没了墨镜,完全可以称得上是举步维艰.生活艰难到需要自己 ...
- docker容器自动化部署(一)
1.docker容器暴露多个端口 To expose just one port, this is what you need to do: docker run -p <host_port&g ...
- CentOS7系统系统检查脚本
#!/bin/bash ############################################################## # File Name: .sh # Versio ...
- HTML、CSS(小笔记)
这是我自己在学习html.css时觉得要记的东西太多总结一些较为常用的标签. HTML <p></p>段落标签 <hn></hn>标题标签n数值为1~6 ...
- 【原创】KMP算法代码(C)
//s是模式字符串,t是匹配字符串(可以看我上一篇文章中的叙述) int KMP(const char * s , const char * t) { int slen = strlen(s) , t ...
- php使用gearman进行任务分发
一.安装gearman 下载gearman源码包 1 https://launchpad.net/gearmand/+download 如: gearmand-1.1.12.tar.gz 下载php的 ...