JavaScript函数的防抖和节流
防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
思路:
每次触发事件时都取消之前的延时调用方法
function debounce(fn) {
let timeout = null; // 创建定时器
return function () {
clearTimeout(timeout); // 函数每次执行先清掉之前定时器
timeout = setTimeout(() => { // 再重新创建一个新的定时器,若在定时器结束前这段时间函数再次触发,则会重复上面逻辑,直到函数不再触发,则定时器结束后执行下面代码
fn.apply(this, arguments);
}, 500);
};
}
function sayHi()
console.log('防抖成功');
}
var input = document.getElementById('input');
input.addEventListener('input', debounce(sayHi)); // 防抖
节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
思路:
每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 函数执行前先判断标记的状态,若为false直接终止
canRun = false; // 走到这里说明之前标记为true,那么本轮函数可以执行,改变标记状态
fn.apply(this, arguments);
setTimeout(() => { // 函数执行后在特定时间内状态一直保持false,若再次触发则在上方直接被终止,直到定时器结束,状态被更改为true,可以再次触发
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
简单来说,防抖就是高频触发事件后只执行最后一次,节流是特定时间内只执行第一次
JavaScript函数的防抖和节流的更多相关文章
- 原生JavaScript实现函数的防抖和节流
原生JavaScript实现函数的防抖和节流 参考:https://www.jianshu.com/p/c8b86b09daf0 想详细了解的直接戳上面链接了,讲得非常清楚.下面只给代码和我自己写的注 ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- JavaScript 中的防抖和节流
什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- [JavaScript] 函数节流(throttle)和函数防抖(debounce)
js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- 使用rxjs以及javascript解决前端的防抖和节流
JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...
- 彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
随机推荐
- python+selenium+js 处理滚动条
selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候需要借 ...
- 用 Docker 来构建 Jumpserver
说明: 项目从 [ Jumpserver 官方 ] fork 而来. 主要更新: OS: ubuntu:18.04 优化了 Dockerfile Jumpserver 版本: 1.4.0 redis ...
- HDU 1234 开门人和关门人 (模拟)
题目链接 Problem Description 每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签 到.签离记录,请根据记录找出当天开门和关门的人. Input ...
- 项目记录 -- zfs get all [volume] python实现的数据构造
zfs get all [volume]命令实现中构造数据结构 一.zfs get all [volume]命令源代码C实现中用到的数据结构有zprop_get_cbdata 和 callback_d ...
- python碎片记录(一)
1.python中求幂运算 2**31-1 2的31次方减一(32位整型数据范围为-2^31~2^31-1,最高位为符号位,负向值比正向值绝对值大1) 2.python中整数除法 x=x//1 ...
- tornado简单使用
这篇适用于快速上手想了解更深:http://www.tornadoweb.cn/ https://tornado-zh.readthedocs.io/zh/latest/ Tornado 是 Fr ...
- python实战===2017年30个惊艳的Python开源项目 (转)
本文转自:http://www.sohu.com/a/216723120_115128 摘要:本文来自Mybridge,介绍了过去一年里30个惊艳的Python开源项目.点击每一个都可以在GitHub ...
- 安全测试===appscan扫描工具介绍
IBM AppScan该产品是一个领先的 Web 应用安全测试工具,曾以 Watchfire AppScan 的名称享誉业界.Rational AppScan 可自动化 Web 应用的安全漏洞评估工作 ...
- OWASP SSL 高级审查工具
http://www.linuxidc.com/Linux/2016-03/129164.htm InfoWorld 在部署.运营和保障网络安全领域精选出了年度开源工具获奖者. 最佳开源网络和安全软件 ...
- EOS.IO技术学习
如今很火的项目EOS的学习,以下主要的内容是基于白皮书 参考: http://chainx.org/paper/index/index/id/20.html EOS.IO软件引入了一种新的块链架构,旨 ...