防抖动功能意味着鼠标滚轮上的e.preventDefault不再起作用 [英] debounce function means e.preventDefault on mousewheel no longer working

问题描述

我正在使用鼠标滚轮切换页面背景.我只想在1000毫秒内触发一次mousewheel事件，因此我正在使用去抖功能.

I am chaging the background of the page using mousewheel. I only want to trigger the mousewheel event once 1000ms, so for that I am using a debounce function.

在添加去抖功能并使用e.preventDefault()之前，它阻止了滚动.但是，现在我添加了去抖功能，该功能不再起作用，用户可以再次滚动页面.

Before I added the debounce function and used e.preventDefault() it prevented the scroll from working. However, now that I have added the debounce function this no longer works and the user can scroll the page again.

请参见下面的代码.

$(document).ready(function() {
    $(document).on('mousewheel DOMMouseScroll',debounce(function(e){
        e.preventDefault();
        //code to change the background image
    }, 1000))
});

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };

推荐答案

然后按如下所示构建它:

then build it like this:

$(document).ready(function() {
    var changeBackground = debounce(function(e){
        //code to change the background image
    }, 1000)
    $(document).on('mousewheel DOMMouseScroll',debounce(function(e){
        e.preventDefault();
        changeBackground(e);
    })
});

这篇关于防抖动功能意味着鼠标滚轮上的e.preventDefault不再起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！