javascript - En ce qui concerne la limitation des fonctions, fn.appplay() dans le minuteur semble bizarre ?

Question

Le code n'est pas compliqué, la logique est très simple, c'est du throttling de fonction, je mets le code directement.

var count = 0

setInterval(() => console.log(new Date().getSeconds()),1000)

function doSomthing() {
  console.log('懵逼。。。。')
  count ++;
}

window.onresize = throttle(doSomthing,1000)

function throttle(fn, threshhold) {
  // 记录上次执行的时间
  var last

  // 定时器
  var timer

  // 默认间隔为 250ms
  threshhold || (threshhold = 250)

  // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
    // 执行 fn，并重新计时
    if (last && now < last + threshhold) {
      clearTimeout(timer)

      // 保证在当前时间区间结束后，再执行一次 fn
      timer = setTimeout(function () {
        last = now
        console.log('第'+count+'次执行')
        fn.apply(context, args)
      }, threshhold)

      // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}

Théoriquement, lorsque je continue de changer la taille de la fenêtre du navigateur (c'est-à-dire que l'intervalle doit être inférieur à 1 s), doSomthing 从第二次开始是不会被执行的。因为我在不断的执行 cleraTimeout，实际运行结果是 console.log('第'+count+'次执行) 确实没有被打印出来，但是当我停止改变浏览器窗口的时候，发现打印出来的 count 并不是 1, et c'est un grand nombre.

Cela montre que dans ce code :

timer = setTimeout(function () {
        last = now
        console.log('第'+count+'次执行')
        fn.apply(context, args)
      }, threshhold)`

setTimeout() 里的匿名函数没有被执行，但是匿名函数里的 fn.apply() Mais il a été exécuté, merci de me dire le principe ? Ou y a-t-il un problème avec mon code lui-même ?

Answer 1

En plus de ceux de setTimeout, de

if (last && now < last + threshhold) { \*...*\ }
else {
     last = now
     fn.apply(context, args) //这里还有一个fn.apply()
}

Lors de la modification de la taille du navigateur, ceci fn.apply dans else sera exécuté toutes les millisecondes de seuil

Donc setTimeout确实只执行了一次，其余的次数是else里的fn.apply n'est en effet exécuté qu'une seule fois, le reste du temps est exécuté par

dans else 🎜

Answer 2

Une opération change size déclenchera plusieurs onresizes. La première fois déclenchera le contenu de else, et l'autre déclenchera le contenu de if. Puisque vous écrivez clearTimeout() avant setTimeout, le contenu du dernier setTimeout sera exécuté. , donc changer la taille une fois déclenchera doSomthing deux fois, et le nombre imprimé différera d'au moins 2. Si l'événement d'opération de chaque changement de taille est supérieur à 250 ms et inférieur à 1 s, la valeur du compte sera supérieure.