js节流与防抖

文章发布于2020年06月22日 18:02, 归类于: 前端

javascript节流、防抖。

知识点:闭包、作用域,arguments、call()、apply()、bind() 的用法。

防抖

事件在n秒后执行触发,如果在n秒内再次触发事件,则重新计时。

<input id="input" type="text">
// 防抖
var debounce = function (fn, delay) {
  var timer = null;
  return function () {
    var that = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

var log = debounce(function (e) {
  console.log(e.target.value)
}, 3000)

var input = document.getElementById('input')
input.addEventListener('keyup', log)

节流

在固定的时间段内,事件被触发n次都不会执行,时间越过时间段后,事件会执行1次

<input id="input" type="text">
// 节流
var throttle = function (fn, delay) {
  var timer = null;
  var startTime = Date.now();
  return function () {
    var that = this;
    var args = arguments
    var remaining = delay - (Date.now() - startTime)
    clearTimeout(timer);
    if (remaining <= 0) {
      fn.apply(that, args)
      startTime = Date.now();
    } else {
      timer = setTimeout(function () {
        fn.apply(that, args)
        startTime = Date.now();
      }, remaining);
    }
  }
}

var log = throttle(function (e) {
  console.log(e.target.value)
}, 3000)


var input = document.getElementById('input')
input.addEventListener('keyup', log)

参考文章

arguments

7分钟理解JS的节流、防抖及使用场景

JS的防抖与节流

转载请注明来源:《 js节流与防抖》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1592820131.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:分享网页到facebook 下一篇:前端切图周记-2