JS的防抖与节流学习笔记
防抖(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的防抖与节流学习笔记的更多相关文章
- JS的防抖与节流
JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...
- JS的防抖和节流
数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...
- js函数防抖、节流实现
防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...
- node.js在windows下的学习笔记(3)---npm
1.什么是npm npm是Node.js的包管理器,它允许开发人员在Node.js的应用程序中创建,共享,重用模块.之前我们通过node的官网的安装程序安装了Node.js,那么npm就已经装好了的. ...
- 将js进行到底:node学习笔记1
废话:自高中以来一直对编程充满激情,磨剑五年,如今要毕业了,我不想用我已经擅长的知识敷衍,而想以一个全新的领域去面向我的毕设--是时候学习一下node.js node.js基础 对于JavaScrip ...
- JS的防抖,节流,柯里化和反柯里化
今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟wc,有点高大上啊.事实上,我们可以在不经意间用过他们但是你却不知道他们叫什么,没关系,相信看了今天的文章你会有一些收获的 节流 ...
- 深入浅出 Vue.js 第九章 解析器---学习笔记
本文结合 Vue 源码进行学习 学习时,根据 github 上 Vue 项目的 package.json 文件,可知版本为 2.6.10 解析器 一.解析器的作用 解析器的作用就是将模版解析成 AST ...
- js实现防抖,节流
防抖函数. 将几次操作合并为一次操作进行.设置一个计时器,规定在延迟时间后触发函数,但是在延迟时间内如果再次触发,就会取消之前的计时器.如此,只有最后一次操作能触发.代码如下: function de ...
- 《JS高程》对象&原型学习笔记
ECMA-262 把对象定义为:”无序属性的集合,其属性可以包含基本值.对象或者函数.”可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数. 6.1.理解 ...
随机推荐
- List分页
listObj.Skip((pagecount-1)*pagesize).Take(pagesize) 假设你每页10条数据当前是第3页 跳到第4页则:listObj.Skip((4-1)*10).T ...
- TCP/IP协议学习
计算机网路学得不好,首先先放个OSI七层网络模型吧 在协议的控制下,上层对下层进行调用,下层对上层进行服务, 上下层间用交换原语交换信息.这样可以提高传输速率,并且保证数据安全,所以说其实每一层都有存 ...
- iOS:你App的设置做对了吗?
http://www.cocoachina.com/ios/20151217/14707.html iOS 8及以上版本最不为人知的一个特点是与应用设置的深层链接,用户可以根据APP的需要授权启用位置 ...
- vue2-vux-fitness-project
非常感谢那些无私开源的程序员,希望我也能够有能力像你们那样,开源很多很有意思的东西~~ //index.html <!DOCTYPE html> <html> <head ...
- USACO93网络流入门Drainage Ditches 排水渠(DCOJ 5130)
题目描述 (传送门:http://poj.org/problem?id=1273翻译 by sxy(AFO的蒟蒻)) 每次约翰的农场下雨,Bessie的水池里的四叶草就会被弄破.这就意味着,这些四叶草 ...
- 从零学React Native之14 网络请求
通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 ...
- 【Leetcode链表】合并两个有序链表(21)
题目 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1-> ...
- Auto CAD 安装问题 “acad.exe - 系统错误 ”
Auto CAD 安装不上,提示“cad装不上 提示无法启动此程序,因为计算机中丢失 ac1st16.dll” 解决方法: 我的电脑——>右键 属性——>高级选项卡(win7的是高级系统设 ...
- 2019-6-11-WPF-如何在应用程序调试启动
title author date CreateTime categories WPF 如何在应用程序调试启动 lindexi 2019-06-11 09:32:35 +0800 2018-2-13 ...
- Java练习 SDUT-3328_JAVA判断合法标识符
JAVA判断合法标识符 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入若干行字符串,判断每行字符串是否可以作为JA ...