Question

我有一个滚动到元素顶部的函数（而不仅仅是跳到那里），但是我需要提供一个选项来在滚动事件发生时暂停执行。

原因是脚本中的其他事件（即显示Dialog）导致动画放弃，而页面只是跳转到元素。

我知道.animate()为complete()等提供了函数，但这并不好，因为从多个位置调用smoothScroll，而某些操作不需要该函数。此外，为了满足这一要求，将代码分成许多小的迷你函数似乎是非常不切实际的。

我尝试过使用setTimeout()，但遗憾的是它看起来好像是在它周围执行，只有在其中声明的代码等待执行。

我需要JS吗？感谢。

function smoothScrool(target, duration, pause){

    /** Ensure that the parameterse are set */
    if(!target.length) return false;
    duration = (typeof duration !== 'number') ? 1000 : duration;
    pause = (typeof pause !== 'boolean') ? true : pause;

    /** Start the animation */
    $('html, body').animate({
        scrollTop: target.offset().top
    }, duration);

    /** Pause until the animation is complete (if required) */
    if(pause){
        setTimeout(function(){
            return true
        }, duration);
    }

}

Answer 1

脚本不可能等待一段时间 - JavaScript会同步执行，因此浏览器会阻止该时间。

因此，您需要做的是将if(pause)之后的所有代码移动到第二个函数afterPause()中。现在你可以：

if(pause) {
  setTimeout(afterPause, duration); // wait
} else {
  afterPause(); // do it now
}

Answer 2

你所指的是'限制'，这是一种功能执行速率受限的系统。以下是如何实现它：

// Create a closure to execute immediately and contain the throttle state
var smoothScroll = ( function throttleClosure(){
    // A throttled function won't run, so set it to false by default
    var throttled = false;

    // Throttling prevents execution, and also sets a timeout after which to unthrottle
    function throttle( duration ){
        setTimeout( function unthrottle(){
            throttled = false;
        }, duration );
    }

    // Return the function to assign to the parent scope's `smoothScroll` variable
    return function smoothScroll(target, duration, pause){
        /** Ensure that the parameterse are set */
        if(!target.length) return false;
        duration = (typeof duration !== 'number') ? 1000 : duration;
        pause    = (typeof pause !== 'boolean')   ? true : pause;

        // If the function is throttled, don't execute
        if( throttled ){
            return false;
        }

        // throttle if necessary… 
        if( pause ){
            throttle( duration );
        }

        /** Start the animation */
        $('html, body').animate({
            scrollTop: target.offset().top
        }, duration);
    }
}() );

暂停脚本一段时间

2 个答案: