1、防抖:当进行连续操作时,只执行最后一次的操作。

 //防抖的概念是 当进行连续操作时,只执行最后一次的操作。
function debounce(fn, delayTime) {
let timeout = null; return function () {
if (timeout) {
clearTimeout(timeout);
} timeout = setTimeout(() => {
fn.call(this);
timeout = null;
}, delayTime);
};
} function func() {} debounce(func,200)

2、节流:

节流的概念是在一定时间内,用户没有再次进行此操作,在固定时间范围内只让操作一次。简单的说就是此次操作时间和上次操作时间要大于时间差,时间差的值由用户指定。
实现原理:使用闭包创建私有变量,这个私有变量用来记录上次操作的时间,此次操作时间与这个私有变量的差值如果超过已设置的时间范围差值,则进行次函数调用,否则不进行调用此函数。
 
   function func(){

    }

    /**
fn:调用的函数;
timeout:时间差
*/
function throlle(fn,timeout){
let time = 0;
return function(){
let time1 = new Date().getTime();
if(time1 - time > timeout){
fn.call(this)
} else {
time = time1
}
}
}
throlle(func,200);
 

【闭包应用】JS:防抖、节流的更多相关文章

  1. JS: 防抖节流

    防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...

  2. js 防抖 节流 JavaScript

    实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮:如resize事件,对某些自适应页面调整DOM的渲染:如keyup事件,监听文字输入并调用接口进行模糊匹配等 ...

  3. js 防抖 节流

    函数防抖:将几次操作合并为一此操作进行.原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置.这样一来,只有最后一次操作能被触发.( ...

  4. js防抖节流

    防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 防抖函数分为非立即执行版和立即执行版. 非立即执行版: 第一 ...

  5. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  6. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  7. 面试必问题:JS防抖与节流

    摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...

  8. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  9. 因为它,我差点删库跑路:js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  10. 视频直播源码,js实现节流和防抖

    视频直播源码,js实现节流和防抖 防抖: 就是指连续触发事件但是在设定的一段时间内中只执行最后后一次,例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又 ...

随机推荐

  1. Sharding-Sphere使用HikariCP连接池连接Ojdbc6报Driver does not support get/set network timeout for connections. (oracle.jdbc.driver.T4CConnection.getNetworkTimeout()I)

    HikariCP连接Ojdbc6报错Driver does not support get/set network timeout for connections. (oracle.jdbc.driv ...

  2. [爬虫]2.3.1 使用Python操作文件系统

    Python提供了许多内置库来处理文件系统,如os.shutil和pathlib等,这些库可以帮助你创建.删除.读取.写入文件和目录. 读取文件 在Python中,你可以使用内置的open函数来打开一 ...

  3. C/C++八大排序

    排序 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 按照难易程度排序,八大排序算法可以从简单到复杂 ...

  4. Git: remote: The project you were looking for could not be found.

    解决方案 最简单的是在电脑的用户凭证中修改,改为正确的结果. 特殊情况 既只对改项目配置,不影响全局 命令如下: 克隆 git clone http://username:password@xxx.c ...

  5. 最全linux基础知识

    linux基础知识 [root@localhost ~]# 各位置表示什么意识 root:表示用户名 (现在的用户是root切换为test便是张三) localhost:表示主机名 (当前主机名切换为 ...

  6. 学习Linux,要把握哪些重点?

    学习Linux,要把握哪些重点? 不知道有没有想学习Linux,但又把握不住学习重点,找不到合适的学习方法的小伙伴,反正我刚开始学习Linux时就像无头苍蝇似的"乱撞",没有把握住 ...

  7. 如何用windows任务视图管理多个程序,提高.net开发效率

    在 Windows 操作系统中,任务栏是一个非常重要的工具栏,用来显示当前正在运行的程序和任务.如果同时运行了很多程序,任务栏上的图标就会变得非常拥挤,不方便管理和切换.为了提高工作效率,可以通过任务 ...

  8. 一款开源免费、更符合现代用户需求的论坛系统:vanilla

    对于个人建站来说,WordPress相信很多读者都知道了.但WordPress很多时候我们还是用来建立自主发布内容的站点为主,适用于个人博客.企业主站等.虽然有的主题可以把WordPress变为论坛, ...

  9. css美化

    编辑网页文本 span标签:能让某几个字凸显出来结构:span{color:red:}    <span>123<span> 字体样式:一般设置两个字体.如果浏览器第一个字体不 ...

  10. ATtiny88初体验(一):点灯

    ATtiny88初体验(一):点灯 最近逛淘宝时,发现一块ATtiny88核心板(MH-ET LIVE Tiny88)用完红包后只剩4块钱了,果断下单,准备好好把玩一番. MH-ET LIVE Tin ...