Apakah anti-goncang dan pendikit dalam javascript

Dalam JavaScript, anti goncang bermakna fungsi hanya akan dilaksanakan sekali dalam masa n saat selepas peristiwa frekuensi tinggi dicetuskan Jika peristiwa frekuensi tinggi dicetuskan semula dalam masa n saat dikira semula; pendikitan bermakna apabila peristiwa frekuensi tinggi berterusan Apabila peristiwa dicetuskan, fungsi pemprosesan acara dijamin akan dipanggil sekali sahaja dalam tempoh masa tertentu.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

1. Anti goncang

Fungsi hanya akan dilaksanakan sekali dalam masa n saat selepas peristiwa frekuensi tinggi dicetuskan peristiwa dicetuskan semula dalam masa n saat, Kemudian kira semula masa

• Idea:
  Peristiwa mengikat tindakan, peristiwa dicetuskan selepas tempoh masa tertentu selepas tindakan itu berlaku tempoh, jika tindakan itu berlaku lagi, tunggu lagi Peristiwa itu dicetuskan semula selepas tempoh masa tertentu.

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
        // 如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
          //因为sayHi函数是在全局中运行，this默认指向了window
          //所以要用apply将inp的this传入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

Sebagai contoh, jika anda mempunyai keperluan bahawa selepas pengguna memasukkan rentetan aksara dalam kotak input, permintaan ajax akan dihantar secara automatik Permintaan untuk rentetan (memadamkan aksara atau memasukkan aksara baharu), tetapi jika pemprosesan anti goncang dilakukan, selepas pengguna memasukkan aksara, rentetan tidak akan berubah selepas 0.5 saat (ini berkemungkinan besar bermakna pengguna telah melengkapkan input rentetan ; 0.5 saat sebelum ini menghantar permintaan.

2. Pendikitan

Apabila peristiwa dicetuskan secara berterusan, pastikan fungsi pemprosesan acara hanya dipanggil sekali dalam tempoh masa tertentu. Oleh itu, pendikitan akan mencairkan kekerapan pelaksanaan fungsi

• Idea:
  Peristiwa mengikat tindakan, acara akan dicetuskan selepas tempoh masa selepas tindakan berlaku dalam tempoh ini , jika tindakan itu berlaku lagi, tindakan itu diabaikan dan tidak boleh dicetuskan semula sehingga acara itu dilaksanakan.

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
          //循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

3. Senario aplikasi gabungan

debounce (anti goncang)

• Cari Lenovo, gunakan anti goncang untuk menyimpan sumber permintaan apabila pengguna memasukkan nilai secara berterusan.

• Apabila pencetus tetingkap mengubah saiz, melaraskan saiz tetingkap penyemak imbas secara berterusan akan mencetuskan acara ini secara berterusan untuk menjadikannya hanya mencetuskan sekali

. pendikit (pendikit)

• Dicetuskan oleh klik tetikus berterusan, tetikus turun (dicetuskan sekali sahaja setiap unit masa)

• Dengar acara menatal, seperti sama ada untuk meluncur ke bawah dan memuatkan lebih banyak secara automatik, gunakan pendikit untuk menilai

[Pembelajaran yang disyorkan: Tutorial Lanjutan JavaScript ]

Atas ialah kandungan terperinci Apakah anti-goncang dan pendikit dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!