Javascript – Lodash – 防抖与节流

简介

防抖与节流在企业项目用得非常多，它可以保证网页在浏览器中不因用户的故意或过失操作而引起的性能问题，甚至运行错误。

Lodash 提供了防抖与节流的功能。

防抖

防抖，通俗的讲是指，若用户在短时间内快速做同一操作时，最终只会执行一次

问题：网站上有一个提交按钮，若用户在短时间内，快速点击提交按钮，那么程序将被错误地提交多次请求。

解决条件：在一次提交上，短时间内，无论用户如何快速地点击提交按钮，有效的永远都是最后一次的提交操作。

解决：使用Lodash的防抖功能实现。

_.debounce(func, [wait=0], [options=])

func : 用于操作的方法（本例中即是按钮点击后的提交方法函数）

wait : 设置用户最后操作时间间隔，若wait=500,则表示用户在第一次操作后500毫秒内，又再一次操作，则第一次操作无效，直到用户最后一次操作超过500毫秒不再操作时，才被认为该操作有效。

onclick: _.debounce(function(){
  console.log("操作被触发")
}, 500)

在上面的代码中，只有 onclick 操作间隔超过500毫秒后，才会被调用 function 中的方法，若两次操作间隔少于500毫秒，则前一次的操作被认为无效。

节流

节流，通俗的讲是指，若用户在短时间内快速做同一操作时，会按设定的时间间隔触发执行

问题：网站上有一个搜索框，搜索框中具有关键词提示功能，用户在搜索框中输入内容，那么程序会因用户的每一次小改动而触发请求。

解决条件：不因用户在搜索框中每一次改变内容都马上请求，而是当用户即使不停的改变内容时，触发请求也会保持特定时间间隔触发。

解决：使用Lodash的节流功能实现

_.throttle(func, [wait=0], [options=])

func : 用于操作的方法（本例中即是搜索框中内容改变时的请求方法）

wait : 设置用户最后操作时间间隔，若wait=500，则当用户不停地触发方法时，该方法也只会每500毫秒才被触发一次。

onchange: _.throttle(function(){ console.log("操作被触发") }, 500)

在上面的代码中，若用户在搜索框中不停地改变内容时，该触发方法依然会按照每隔500毫秒执行一次。