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

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. JVM调优命令-jhat

    jhat JVM Heap Analysis Tool命令是与jmap搭配使用,用来分析jmap生成的dump,jhat内置了一个微型的HTTP/HTML服务器,生成dump的分析结果后,可以在浏览器 ...

  2. 2018-2019-2 《Java程序设计》第1周学习总结

    # 20175319 2018-2019-2 <Java程序设计>第1周学习总结 ## 教材学习内容总结 第一周我根据老师提供的博客,下载和设置了各种需要的软件,并对这些软件进行初步的了解 ...

  3. JN_0002：Win10禁止U盘拷贝文件的方法

    1,在电脑桌面使用快捷键win键+r唤出运行窗口,在搜索框中输入gpedit.msc,然后点击确定. 2,打开的本地组策略编辑器中依次点击展开计算机配置—管理模块—系统,在系统下找到并选中可移动存储访 ...

  4. INI配置文件的格式

    为什么要用INI文件?如果我们程序没有任何配置文件时,这样的程序对外是全封闭的,一旦程序需要修改一些参数必须要修改程序代码本身并重新编译,这样很不好,所以要用配置文件,让程序出厂后还能根据需要进行必要 ...

  5. 第29月第27天 Error: Multiple commands produce

    1. 解决方法可以有两种,一种是不使用New Build System,在File > Project/Workspace Settings中的Share Project/Workspace S ...

  6. Executors的四种线程池

    Executors.newCachedThreadPool(); Executors.newFixedThreadPool(2); Executors.newScheduledThreadPool(2 ...

  7. Python3 字符串与hex之间的相互转换

    在字符串转换上,python2和python3是不同的,在查看一些python2的脚本时候,总是遇到字符串与hex之间之间的转换出现问题,记录一下解决方法. 1. 在Python2.7.x上,hex字 ...

  8. mysql之concat concat_ws group_concat

    concat.concat_ws.group_concat都可以用来连接字符串. concat和concat_ws用来连接同一行中不同列的数据,group_ws用来连接同一列的数据. 格式如下: co ...

  9. torch分类问题

    import torch from torch.autograd import Variable import torch.nn.functional as F import matplotlib.p ...

  10. POJ 1269 Intersecing Lines （直线相交）

    题目: Description We all know that a pair of distinct points on a plane defines a line and that a pair ...