关于javascript:js-实现防抖与节流

防抖和节流

防抖和节流其实都是为了躲避频繁触发回调导致大量计算,从而影响页面产生抖动甚至卡顿, 简略来说就是将多从回调, 比方ajax调用或者页面点击变为一次.
防抖和节流的区别在于以第一次为准还是以最初一次为准

节流throttle

在一段时间内, 无论触发屡次, 都以第一次为准, 比方 输入框补全提醒,只须要没两秒补全一次
次要思路是通过工夫戳判断, 每次调用判断和上一次调用工夫差别确定是否须要从新调用

const throttle = (fn, delay) => {    // 定义上次触发工夫    let last = 0;    return (...args) => {        const now = + Date.now();        if (now > last + delay) {            fn.apply(this, args);        }    }}let num = 1;let content = document.getElementById('content');function count () {    content.innerHTML = num++;}content.onmousemove = throttle(count, 1000)

防抖debounce

应用定时器执行函数, 新调用产生时如果旧调用没有执行就革除之前的定时器

const debounce = (fn, delay) => {    let timmer;    return (...args) => {        if (timmer) {            clearnTimeout(timmer)        }        timmer = setTimeout(() => {            fn.apply(this, args)        }, delay)    }   }let num = 1;let content = document.getElementById('content');function count () {    content.innerHTML = num++;}content.onmousemove = debounce(count, 1000)