谁能给我一个简单的解释，关于节流和debounging函数之间的区别，以限制速率的目的。
在我看来，两者的作用是一样的。我查看了这两个博客来找出答案:
http://remysharp.com/2010/07/21/throttling-function-calls
http://benalman.com/projects/jquery-throttle-debounce-plugin/
当前回答
节流阀的简单概念是在表单中频繁点击提交按钮，我们需要使用节流阀。因此提交功能可以防止频繁点击。它将相同的请求保存到函数中。
关于debounce，编写了一个简单的带有输入文本标签的代码，用于从服务器上搜索一些数据。Oninput使用debounce删除之前的请求，并将最后输入的单词传递给服务器
const throttle = (callback, time = 0) => {
let throttle_req, count = 0;
return async function () {
var context = this, args = arguments;
if(throttle_req) return;
throttle_req = true;
if(time > 0)
{
callback.apply(context, args);
setTimeout(() => {
throttle_req = false;
}, time || 200)
}
else
{
let response = await callback.apply(context, args);
throttle_req = false;
return response;
}
}
}
const debounce = (callback, time = 0) => {
let debounce_req;
return function () {
var context = this, args = arguments;
clearTimeout(debounce_req)
debounce_req = setTimeout(() => {
debounce_req = null;
callback.apply(context, args);
}, time || 200)
}
}
我们如何调用:只是用节流或debounce包装你的函数来检查差异
节流阀:同一按钮点击超过1次
var throttleFunct = throttle(function(num) {
console.log(num, "hello throttle")
}, 2000);
throttleFunct(300) //it execute. because its the first call
throttleFunct(400) //it won't execute
节流异步没有时间
var getDataAsync = throttle(function(id, name) {
return new Promise((resolve) => {
setTimeout(() => {
resolve({name: name, id: id})
}, 2000)
})
});
async function test() {
let response = await getDataAsync(120, 'Sherley').then(resp => resp)
console.log(response, "respond") //it execute. because its the first call
response = await getDataAsync(120, 'James').then(resp => resp)
console.log(response, "respond2")//it executes 2 after first request
response = await getDataAsync(120, 'Jonathan').then(resp => resp)
console.log(response, "respond3")//it executes 3 after second request
}
test()
例如:搜索框自动完成
var debounceFunct = debounce(function(num) {
console.log(num+1)
}, 2000);
debounceFunct(300) //it won't execute and it cancelled
debounceFunct(400) // it executes and it replaced with the previous call. because this is the latest event fire
其他回答
防反跳:
如果函数没有在间隔内被调用，则在间隔后执行函数。
节流:
以固定的时间间隔执行函数n次。
debounging和Throttling是从一系列事件中选择目标以达到减少目标的目的。它们都需要一段时间作为参数，例如:x ms，以及后面/前面的变量来定义如何选择。
消除抖动
当x毫秒后没有其他事件发生时，选择事件
"--->": timeline "o": event "|===|": period (x=5)
--oo-o-----ooo-o----o-oo--oo-----o-o-ooo------> events
|===| |===| |===| |===|
||===| ||===| | |===| | |===|
| |===| | |===| | |===| | |===|
| | | |===|| |===| | |===|
| | | || |===| | |===|
---------o---------o-----------o-----------o--> selected events (trailing)
--o--------o--------o------------o------------> selected events (leading)
节流
当有事件发生时，每x毫秒选择一个事件
"--->": timeline "o": event "|===|": period (x=5)
--oo-o-----ooo-o----o-oo--oo-----o-o-ooo------> events
|===| |===| |===| |===| |===||===|
------o--------o--------o-----o------o----o---> selected events (trailing)
--o--------o--------o-----o------o----o-------> selected events (leading)
将debounce和throttle放在一起可能会非常令人困惑，因为它们都共享一个称为延迟的参数。
防反跳。延迟是等到不再有调用时，再调用它。就像关闭电梯门一样:门必须等到没有人试图进入时才能关闭。
节流。延迟是以一定的频率等待，然后调用最后一个。很像手枪射击，枪只是不能超过一定的射速。
让我们看一看实现的细节。
function debounce(fn, delay) {
let handle = null
return function () {
if (handle) {
handle = clearTimeout(handle)
}
handle = setTimeout(() => {
fn(...arguments)
}, delay)
}
}
Debounce，继续中断超时，直到不再中断为止，然后触发fn。
function throttle(fn, delay) {
let handle = null
let prevArgs = undefined
return function() {
prevArgs = arguments
if (!handle) {
fn(...prevArgs)
prevArgs = null
handle = setInterval(() => {
if (!prevArgs) {
handle = clearInterval(handle)
} else {
fn(...prevArgs)
prevArgs = null
}
}, delay)
}
}
}
Throttle，存储最后一个调用参数，并设置一个间隔来触发，直到没有过去的调用。
相似之处。它们都有延迟时间，并且在延迟期间不会发生火灾，特别是当只有一场火灾时。两者都不聚合过去的事件，因此事件的数量可能与实际的火灾不同。
的区别。在有重复事件的弹跳情况下，延迟可以延长。而在节流阀情况下的延迟是固定的。所以一般来说，油门产生的火焰比反弹产生的火焰要多。
很容易记住。将组捆绑为一个。节流保持捆绑调用在一定的频率。
更新1-20-23
Throttle可能不需要setInterval，这是我最近写的一个新版本，它也照顾到了这个问题。
function throttle(fn, delay) {
let canFire = true
let queue = []
function pop() {
if (queue.length < 1) return
const [that, args] = queue.pop()
fn.apply(that, args)
canFire = false
setTimeout(() => {
canFire = true
pop()
}, delay)
}
function push() {
queue.push([this, arguments])
if (canFire) pop()
}
push.cancel = () => {
queue = []
}
return push
}
节流阀的简单概念是在表单中频繁点击提交按钮，我们需要使用节流阀。因此提交功能可以防止频繁点击。它将相同的请求保存到函数中。
关于debounce，编写了一个简单的带有输入文本标签的代码，用于从服务器上搜索一些数据。Oninput使用debounce删除之前的请求，并将最后输入的单词传递给服务器
const throttle = (callback, time = 0) => {
let throttle_req, count = 0;
return async function () {
var context = this, args = arguments;
if(throttle_req) return;
throttle_req = true;
if(time > 0)
{
callback.apply(context, args);
setTimeout(() => {
throttle_req = false;
}, time || 200)
}
else
{
let response = await callback.apply(context, args);
throttle_req = false;
return response;
}
}
}
const debounce = (callback, time = 0) => {
let debounce_req;
return function () {
var context = this, args = arguments;
clearTimeout(debounce_req)
debounce_req = setTimeout(() => {
debounce_req = null;
callback.apply(context, args);
}, time || 200)
}
}
我们如何调用:只是用节流或debounce包装你的函数来检查差异
节流阀:同一按钮点击超过1次
var throttleFunct = throttle(function(num) {
console.log(num, "hello throttle")
}, 2000);
throttleFunct(300) //it execute. because its the first call
throttleFunct(400) //it won't execute
节流异步没有时间
var getDataAsync = throttle(function(id, name) {
return new Promise((resolve) => {
setTimeout(() => {
resolve({name: name, id: id})
}, 2000)
})
});
async function test() {
let response = await getDataAsync(120, 'Sherley').then(resp => resp)
console.log(response, "respond") //it execute. because its the first call
response = await getDataAsync(120, 'James').then(resp => resp)
console.log(response, "respond2")//it executes 2 after first request
response = await getDataAsync(120, 'Jonathan').then(resp => resp)
console.log(response, "respond3")//it executes 3 after second request
}
test()
例如:搜索框自动完成
var debounceFunct = debounce(function(num) {
console.log(num+1)
}, 2000);
debounceFunct(300) //it won't execute and it cancelled
debounceFunct(400) // it executes and it replaced with the previous call. because this is the latest event fire
通俗地说:
debound将阻止一个函数在仍然被频繁调用时运行。debound函数只在确定不再被调用后才会运行，此时它只会运行一次。脱绳的实际例子:
如果用户“停止输入”，自动保存或验证文本字段的内容:该操作将只执行一次，在确定用户不再输入(不再按键)之后。 记录用户休息鼠标的位置:用户不再移动鼠标，因此可以记录(最后)位置。
节流只会阻止最近运行过的函数运行，不管调用频率如何。节流的实际例子:
v-sync的实现是基于节流的:从上一次绘制屏幕到现在已经过去了16ms，屏幕才会被绘制。无论调用多少次屏幕刷新功能，它最多只能每16毫秒运行一次。
