延迟执行任务

Question

I am using gulp-watch to monitor file changes and I have code that look something like this:

watch('public/**/*.js',function(){
    runSequence('compressjs','browser-sync','jshint');
});

It works fine. But because it run the task every-time as soon as there is changes to the file, it causes repeat task execution when there is more than 1 file changed.

How can I make the delay to task execution so that when there is more than 1 file changes in a extreme short period of time, it only execute the task once and only execute after the last file changes done?

Answer 1

Taken from: https://remysharp.com/2010/07/21/throttling-function-calls#comment-216435

Try this:

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

watch('public/**/*.js',function(){
    debounce(runSequence('compressjs','browser-sync','jshint'), 500);
});

Answer 2

After much searching and many failures using debounce, debounce watch, I came up with a simple solution where my function 'buildAngularApp' is the equivalent of 'runSequence'. Here is the code example:

//the files to watch    
var backendModules = ['**/*.min.js']
var delay = 2000;

/*
The watched build task
*/
gulp.task('watchBuild', function () { 
    console.log('Watching: ' + backendModules);
    gulp.watch(backendModules,
        function () {
            setTimeout(function () {
                console.log('Timer ' + delay + ' Reached');
                return buildAngularApp();
            }, delay);
        });
});

/*
The non watched task to build. calls the same build function
*/
gulp.task('build', function () {
    return buildAngularApp();
})

/*
The gulp task wrapped in a function
*/
function buildAngularApp() {
    return gulp.src(backendModules)
        .pipe($.useref())
        .pipe($.sourcemaps.init())
        .pipe($.concat('app.js'))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('lib/js'))
        .pipe($.size({
            title: path.join('lib/js'),
            showFiles: true
        }));
}

Answer 3

In Gulp 4, gulp.watch supports setting a delay. See my answer here for the full low-down.