避免一个函数频繁执行 - 避免程序卡顿

js 是单线程的，setTimeout 这样的函数是异步的

异步的代码，交给对应的模块进行处理

模块在会将异步任务，在主线程执行完所有同步代码后，加入事件队列

模块在没有同步代码的时候，才会执行异步代码

  • 函数防抖（连续触发，只执行最后一次）

具体应用： 在用户输入还未有意义时，不进行自动 请求

度娘自信服务器强大，无需防抖处理。

  • 函数节流（连续触发，两次执行有固定延迟） ---- 应用场景： 模糊搜索

设置特定的事件，让函数在特定事件内 只执行一次，不会频繁执行

当操作呈线性时，现象不会呈线性，而是两次之间有最小延迟

函数防抖 & 函数节流的更多相关文章

  1. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  2. vue函数防抖和节流

    Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 <template> <div> <input type='text' v ...

  3. JavaScript中函数防抖、节流

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

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

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

  5. 区分函数防抖&函数节流

    1. 概念区分 函数防抖:触发事件后,在n秒内函数只能执行一次,如果触发事件后在n秒内又触发了事件,则会重新计算函数延执行时间. 简单说: 频繁触发, 但只在特定的时间内才执行一次代码,如果特定时间内 ...

  6. js中的函数防抖与节流

    一.滚动条监听的例子 写一个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离,代码如下: function showTop () { var scrollTop = document.bod ...

  7. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  8. “浅入浅出”函数防抖（debounce）与节流(throttle)

    函数防抖与节流是日常开发中经常用到的技巧,也是前端面试中的常客,但是发现自己工作一年多了,要么直接复用已有的代码或工具,要么抄袭<JS高级程序设计>书中所述"函数节流" ...

  9. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

随机推荐

  1. jpa返回List<Map<String, Object>>相当于jdbctemplate的queryForlist

    public class Test(){ @PersistenceContext(unitName = "manageFactory") protected EntityManag ...

  2. C#任务同步

    using System; using System.Diagnostics; using System.Threading; using System.Threading.Tasks; using ...

  3. 两个Html页面之间值得传递

    传值的页面:<a href='stockProductInfo.html?prdId="+v.prdID+"' target='_blank'></html> ...

  4. Existing lock /var/run/yum.pid: another copy is running as pid 解决办法

    yum只能支持一个例程运行,所以如果有一个例程已经在运行,其他的必须等待该进程退出释放lock.出现这种情况时,可以用以下命令来恢复: rm -f /var/run/yum.pid

  5. shim和polyfill

    shim是将新的api引入旧的环境 polyfill是一段代码或插件 https://www.aliyun.com/jiaocheng/773254.html 理解得不够透彻...

  6. 详解HTTPS、TLS、SSL

    HTTPS.TLS.SSL HTTP也称作HTTP over TLS.TLS的前身是SSL,TLS 1.0通常被标示为SSL 3.1,TLS 1.1为SSL 3.2,TLS 1.2为SSL 3.3.下 ...

  7. Mysql索引机制(B+Tree)

    1,索引谁实现的: 索引是搜索引擎去实现的,在建立表的时候都会指定,搜索引擎是一种插拔式的,根据自己的选择去决定使用哪一个. 2,索引的定义: 索引是为了加速对表中数据行的检索而创建的一种分散存储的( ...

  8. Windows系统中python3.7安装数据可视化模块Matplotlib、numpy的各种方法汇总

    安装环境:Windows10 64位Python3.7 32位 确保已经安装PIP工具命令窗口输入PIP出现以下窗口说明PIP已经成功安装 方法1:(1)在Matplotlib的官网下载电脑对应的版本 ...

  9. 阿里云centos7成功安装和启动nginx，但是外网访问不了的解决方案

    问题环境: 阿里云centos7.4.1708 问题描述:成功配置,启动成功,外网访问不了 解决方案: 经过查阅文档,去阿里云后台查看,原来是新购的服务器都加入和实例安全组. (OMG)立即去配置.加 ...

  10. Web.Config加密与解密

    可以使用受保护配置来加密 Web 应用程序配置文件(如 Web.config 文件)中的敏感信息(包括用户名和密码.数据库连接字符串和加密密钥).对配置信息进行加密后,即使攻击者获取了对配置文件的访问 ...