js事件点击第二次才触发是为什么_JS防抖和节流傻傻分不清楚-白红宇

js事件点击第二次才触发是为什么_JS防抖和节流傻傻分不清楚

阅读量：5322 次

发布时间：2019-06-14

本文共 1204 字，大约阅读时间需要 4 分钟。

这两个概念经常混淆, 今天就来捋一捋两者的概念/区别以及使用JS来实现的方式.

一. 防抖(debounce)

任务频繁触发的情况下, 只有任务触发的间隔超过指定时间的时候, 任务才执行. 例如执行resize()事件时, 当改变窗口大小时, 会频繁的触发resize事件, 可能短时间内就执行几十次, 这是相当消耗性能的.

JS实现思路:

利用setTimeout和clearTimeout来实现, 开启一个定时器, 设定延迟时间, 每次执行resize事件时, 将定时器清除, 然后再重新开启一个定时器, 因此, 不管触发多少次resize事件, 只有每次触发时间后, 只有等待所设置的timeout时间才会触发.

代表事件: 联想词

JS实现

二. 节流(throttle)

指定时间间隔内只会执行一次任务. 这个好理解, 比如设置间隔时间为1s, 那么在1s之内, 不管触发了多少次事件, 都只会执行一次.

JS实现思路: 利用时间戳来实现, 具体思路为计算上一次触发的时间, 然后与当前时间做差值, 如果这个差值大于我们设置的wait时间, 则允许触发, 否则不允许触发.

代表事件: 用户点击提交按钮

JS实现

节流这里还有一种方法, 具体上代码.(不过我还是更倾向于第一种方法, 简单易懂)

// 鼠标进入, count加1let count = 0;function doSomething (e) {    count++    $('.wrapper').text(count)}$('.wrapper').mousemove(throttle(doSomething, 1000))// throttle函数function throttle (func, wait) {    let args, context, timeout;    return function () {        args = arguments;        context = this;        if (!timeout) {            timeout = setTimeout(function () {                func.apply(context, args)                timeout = null            }, wait)        }    }}

最后附上style:

.wrapper{    height: 200px;    width: 50%;    background: #ccc;    font-size: 40px;    color: red;    font-weight: bold;    text-align: center;    line-height: 200px;}

转载地址：http://mihhv.baihongyu.com/

你可能感兴趣的文章

SQL server 2012 安装SQL2012出现报错: 启用 Windows 功能 NetFx3 时出错