防抖(debounce):当持续触发事件时,在一定的时间段内,只有最后一次触发的事件才会执行。

例:

    function debounce(fn, wait) {
var timer = null;
return function() {
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(fn, wait);
}
}
function handle() {
console.log('防抖处理!');
}
window.addEventListener('scroll', debounce(handle, 1000));

节流(throttle):当持续触发事件时,已执行的事件在一定时间段内不会再次执行。实现节流有时间戳和定时器两种方式。

例:

// 时间戳:
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var now = Date.now();
if (now - prev >= delay) {
func();
prev = Date.now();
}
}
}
function handle() {
console.log('节流处理!');
}
window.addEventListener('scroll', throttle(handle, 1000));
// 定时器:
var throttle = function(func, delay) {
var timer = null;
return function() {
if (!timer) {
timer = setTimeout(function() {
func();
timer = null;
}, delay);
}
}
}
function handle() {
console.log('节流处理!');
}
window.addEventListener('scroll', throttle(handle, 1000));

函数防抖和节流都是防止某一事件被频繁触发;区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为一段时间只执行一次

应用场景:窗口resize、页面scroll、拖拽、限时抢购、实时搜索等。

JS的防抖与节流学习笔记的更多相关文章

  1. JS的防抖与节流

    JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...

  2. JS的防抖和节流

    数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...

  3. js函数防抖、节流实现

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

  4. node.js在windows下的学习笔记(3)---npm

    1.什么是npm npm是Node.js的包管理器,它允许开发人员在Node.js的应用程序中创建,共享,重用模块.之前我们通过node的官网的安装程序安装了Node.js,那么npm就已经装好了的. ...

  5. 将js进行到底:node学习笔记1

    废话:自高中以来一直对编程充满激情,磨剑五年,如今要毕业了,我不想用我已经擅长的知识敷衍,而想以一个全新的领域去面向我的毕设--是时候学习一下node.js node.js基础 对于JavaScrip ...

  6. JS的防抖,节流,柯里化和反柯里化

    今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟wc,有点高大上啊.事实上,我们可以在不经意间用过他们但是你却不知道他们叫什么,没关系,相信看了今天的文章你会有一些收获的 节流 ...

  7. 深入浅出 Vue.js 第九章 解析器---学习笔记

    本文结合 Vue 源码进行学习 学习时,根据 github 上 Vue 项目的 package.json 文件,可知版本为 2.6.10 解析器 一.解析器的作用 解析器的作用就是将模版解析成 AST ...

  8. js实现防抖,节流

    防抖函数. 将几次操作合并为一次操作进行.设置一个计时器,规定在延迟时间后触发函数,但是在延迟时间内如果再次触发,就会取消之前的计时器.如此,只有最后一次操作能触发.代码如下: function de ...

  9. 《JS高程》对象&原型学习笔记

    ECMA-262 把对象定义为:”无序属性的集合,其属性可以包含基本值.对象或者函数.”可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数.   6.1.理解 ...

随机推荐

  1. python流程控制和循环

    变量的命名:可以由数字字母下换线组成 ,不能以数字开头,可以使用中文但是不推荐使用中文,不推荐前面使用_ __,不能使用系统的关键字,变量名严格区分大小写 逻辑运算优先级 or<and<n ...

  2. Jmeter VS LR参数取值方式和迭代方式

    Jmeter的参数化 Jmeter中的参数就是变量. 变量的来源:测试计划.UDV.CSV.函数.正则表达式.数据库. 以Jmeter的CSV文件参数化为例:

  3. thinkphp5.0 模板输出常用内容

    1.在模板获取session和cookie等全局变量 {$Think.session.user_id}//输出$_SESSION['user_id']变量 2.获取请求信息 {$Request.con ...

  4. JDK 8 中包列表及介绍

    了解了Java 8中所有包的作用,对Java 8有了一个整体的了解,另外也是提高了自身的阅读能力.本文列出了Java 8中所有的包,并且对每一个包的功能做了简要的说明,希望对你有所帮助. ------ ...

  5. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十三章:计算着色器(The Compute Shader)

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十三章:计算着色器(The Compute Shader) 代码工程 ...

  6. html5之div,article,section区别与应用

    div 块级元素,在里面的内容会自动开始新行,可以定义文档中的分区或节,把文档分割成独立,不同的部分 本身没有什么语义,更适合帮助布局,进行样式化. <div> </div> ...

  7. CPU核数和线程数查找

    方法1: 方法2:

  8. 下载mysql document

    wget -b -r -np -L -p https://dev.mysql.com/doc/refman/5.6/en/ 在下载时.有用到外部域名的图片或连接.如果需要同时下载就要用-H参数. wg ...

  9. 5-2 正则表达式及其re模块

    一 正则表达式 在线测试工具 http://tool.chinaz.com/regex/ 字符 量词 贪婪匹配 贪婪匹配:在满足匹配时,匹配尽可能长的字符串,默认情况下,采用贪婪匹配,<.*&g ...

  10. oracle函数 least(exp1,exp2,exp3,……,expn)

    [功能]返回表达式列表中值最小的一个.如果表达式类型不同,会隐含转换为第一个表达式类型. [参数]exp1……n,各类型表达式 [返回]exp1类型 [示例] SELECT least(10,32,' ...